当前位置: 首页 > 编程日记 > 正文

网页制作常见的问题(怎样兼容IE6/IE7/火狐浏览器)

1、IE6双边距问题?

在IE6的浏览器中明明设置的是10px的margin却为什么显示的是20px的margin其实这个Ie6的一个双边距BUG
例如:
<style type="text/css">
body {margin:0}
div { float:left; margin-left:10px; width:300px; height:300px; border:1px solid red; }
</style>
因为加上浮动后就会多出一倍的边距,浮动后本来外边距10px,但IE6会解析成20px,只需要在div的样式里加上display:inline;就可以解决以上问题。

2、为什么中火狐浏览器下文本无法撑开容器的高度?
  标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的 IE6 可以这样定义:
div { height:auto!important; height:200px; min-height:200px; }

3、如何定义1px左右高度的容器?
  IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line- height:1px

4、为什么web标准中无法设置IE浏览器滚动条颜色了?
  原来样式设置:
<style type="text/css"> 
body { scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000; scrollbar-track-color:#fff; scrollbar-darkshadow-color:#fff; }  
</style>

解决办法是将body换成html

5、怎样使一个div层居中于浏览器中?
<style type="text/css"> 
div {  
position:absolute;  
top:50%;  
left:50%;  
margin:-100px 0 0 -100px;  
width:200px;  
height:200px;  
border:1px solid red;  
}  
</style>
  这里使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二
 
6、firefox浏览器中嵌套div标签的居中问题的解决方法
  假定有如下情况:
<div id="a"> 
       <div id="b"> </div> 
</div>
  如果要实现b在a中居中放置,一般只需用CSS设置a的text-align属性为center。这样的方法在IE里看起来一切正常;但是在Firefox中b却会是居左的。
  解决办法就是设置b的横向margin为auto。例如设置b的CSS样式为:margin: 0 auto;。
 
7、超链接点击过后hover样式就不出现的问题?
  被点击访问过的超链接样式不再具有hover和active样式了,解决方法是改变CSS属性的排列顺序: L-V-H-A
(link-visited-hover-active)
8、.img 下的留白,大家看这段代码有啥问题:

<div>
<img src=”" mce_src=”" />
</div>

把div的border打开,你发现图片底部不是紧贴着容器底部的,是img后面的空白字符造成,要消除必须这样写

<div>
<img src=”" mce_src=”" /></div>

后面两个标签要紧挨着。ie7下这个bug 依然存在。解决方案:给img设定 display:block。

9、怎么样才能让flash透明显示在层上面之上呢?
<div class="banner" style="background:url(../images/ad.jpg);width:1108px;height:72px;
overflow:hidden; ">
<EMBED align=right src="../images/3.swf" width="1108" height="72"  type=application/octet-stream
  wmode="transparent"quality="high"  ></EMBED>
<EMBED align=left src="../images/95.swf"   width=1108 height=72  type=application/octet-stream
 wmode="transparent"quality="high" ></EMBED>
</div>

宽和高一定要和层的一样

10、为什么FF下文本无法撑开容器的高度?
     标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉he ight设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:

div { height:auto!important; height:200px; min-height:200px; }

11、IE6断头台问题

<div id="layout">

<div id="left">

<p>从打火机发动机是分开了从打火机发动机是分开了从打火机发动机是分开了从打火机发动机是分开了从打火机发动机是分开了从打火机发动机是分开了从打火机发动机是分开了从打火机发动机是分开了从打火机发动机是分开了</p>

</div>

<a href="#">链接1</a>

<a href="#">链接2</a>

<a href="#">链接3</a>

<a href="#">链接4</a>

#layout{width:400px; border:5px solid #d4ca25;}

#left{width:200px; float:left;border:5px solid #35bb0c;}

当网页打开的时候页面显示正常,但鼠标指向右面对象“链接3”以及“链接4”的时候,主对象#layout下面被切掉,剩下的高度刚好是4个链接的高度。当鼠标再回到“链接1”,左侧的高度又恢复,

解决方法:把四个链接用<div id=right></div>包起来,给#right{floatleft;}

转载于:https://www.cnblogs.com/tnnyang/p/4073361.html

相关文章:

Ubuntu系统---安NVIDIA 驱动后 CUDA+cuDNN 安装

Ubuntu系统---安NVIDIA 驱动后 CUDAcuDNN 安装 --------------------------------------------20190726--------------------------------------------------------------------------------------------- 上接《Ubuntu系统---NVIDIA 驱动安装》。预配置环境&#xff1a;Ubunt…

Maya基础入门学习教程

Maya基础入门学习教程 视频&#xff1a;.MKV, 1280x720, 共57节课 时长 4小时25分钟&#xff0c;3GB 语言&#xff1a;英语中文字幕&#xff08;根据原英文字幕机译更准确&#xff09;原英文字幕 指导老师&#xff1a;Shane Whittington Shane Whittington 百度一下 云桥网…

java学习总结:3

逻辑运算 1.’!’(非) 2.与(多个条件一起满足) Java中&&和&都是表示与的逻辑运算符&#xff0c;都表示逻辑运输符and&#xff0c;当两边的表达式都为true的时候&#xff0c;整个运算结果才为true&#xff0c;否则为false。 ’&&的短路功能&#xff0c;当…

asp.net httpmodule 访问页面控件 备忘

用到的时候发现还得找代码&#xff0c;存一个例子方便自己和他人修改&#xff1a; using System; using System.Data; using System.Configuration; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls;…

Ubuntu下Sublime Text 3解决无法输入中文的方法

2019独角兽企业重金招聘Python工程师标准>>> 环境&#xff1a; Ubuntu14.04搜狗输入法 for LinuxSublime text 3提示&#xff1a;编译请在非root下进行 本经验目前在Ubuntu14.04环境下&#xff0c;已有搜狗输入法 for Linux和Sublime Text 3的情况下安装成功。 保存…

电子书下载:Building Websites with DotNetNuke 5

下载&#xff1a;http://www.ctdisk.com/file/9941471 转载于:https://www.cnblogs.com/MaxWoods/archive/2012/10/10/2719167.html

Java学习总结:4

面向对象 面向对象的程序设计具有封装性、继承性、多态性。 类的定义语法如下&#xff1a; class 类名称{数据类型 属性(变量);...public 返回值的数据类型 方法名称(参数1&#xff0c;参数2...){程序语句;[return 表达式;] } }定义类 class Book {String title;double pric…

在3ds Max中使用V-Ray 5渲染引擎视频教程

在3ds Max中使用V-Ray 5渲染引擎视频教程 MP4 | 视频&#xff1a;h264, 1280x720 | 音频&#xff1a;AAC, 44.1 KHz, 2通道。AAC, 44.1 KHz, 2 Ch. 技能水平。初学者&#xff5c;类型&#xff1a;电子学习&#xff5c;语言&#xff1a;英语中文字幕&#xff08;根据原英文字幕…

OC实用转换model的工具

OC实用转换model的工具 说明 这是本人写的一个专门用来将json数据直接转换生成Model文件的工具,目的是为了让你从写Model文件的繁琐过程中解脱出来,提升效率以及减少出错的几率,工具的特点如下: 1. 用组合设计模式处理树形数据结构(非线性数据结构) 2. 在调试台中处理生成Model…

后端怎么防止重复提交?(常用的做法)

后端怎么防止重复提交&#xff1f;&#xff08;常用的做法&#xff09; 客户端的抖动&#xff0c;快速操作&#xff0c;网络通信或者服务器响应慢&#xff0c;造成服务器重复处理。防止重复提交&#xff0c;除了从前端控制&#xff0c;后台也需要控制。因为前端的限制不能解决…

利用MAC OS X 自带的磁盘工具提取光盘镜像ISO文件

虽说渐渐地Mac笔记本基本告别内置光驱时代了&#xff0c;随着网络的普及&#xff0c;使用到光驱的机会也渐少&#xff0c;但有时又难免需要光驱&#xff0c;比如二货出版社的随书光盘等…我们可以通过USB外置光驱将光盘内容提取为ISO文件保存到电脑里&#xff0c;方便以后可以随…

Java学习总结:5

面向对象 对象数组 引用数据类型也可以定义数组 格式&#xff1a; 1.对象数组的动态初始化 类名称 对象数组名称 new 类名称 [长度];动态初始化默认情况下&#xff0c;数组的每一个元素都是其对应的默认值null。 class Book5{private String title;private double price;…

Maya初学者完整的3D动画大师班视频教程

Maya初学者完整的3D动画大师班视频教程 时间13小时30分 包括课程项目文件 1280X720 MP4 语言&#xff1a;英语中文字幕&#xff08;根据原英文字幕机译更准确&#xff09;原英文字幕 教程大小解压后&#xff1a;8.38G Maya初学者。完整的3D动画大师班 百度一下 云桥网络 平台…

jQuery-1.9.1源码分析系列(四) 缓存系统

先前在分析Sizzle的时候分析到Sizzle有自己的缓存机制&#xff0c;点击这里查看。不过Sizzle的缓存只是对内使用的&#xff08;内部自己存&#xff0c;自己取&#xff09;。接下来分析jQuery可以对外使用的缓存&#xff08;可存可取&#xff09;。 首先需要明白jQuery缓存需要解…

CBA 赛程的笔记 - 北京首钢

2014-11-01 19:35北京首钢103:89广东宏远结束技术统计 发挥不错&#xff0c;打的比较好&#xff01;2014-11-05 19:35八一双鹿89:100北京首钢结束技术统计 第一节国内球员打的太屎&#xff0c;最后一节国内球员发挥不错&#xff01;2014-11-07 19:35浙江稠州107:116北京首钢结束…

个人技术生涯的感悟(2)

很多时候&#xff0c;一门门槛很低的编程语言对于初学者的帮助是非常大的&#xff0c;从而决定这个人的技术路线的选择。 在经历过大一下学期对C&#xff0c;和C的迷茫之后&#xff0c;在大二上学期&#xff0c;学校在搞一个网页设计比赛&#xff0c;正好和两个朋友一起参赛。开…

HtmlAgilityPack 处理通配的contains

//选择不包含class属性的节点 var result node.SelectNodes(".//span[not(class)]"); //选择不包含class和id属性的节点 var result node.SelectNodes(".//span[not(class) and not(id)]"); //选择不包含class"expire"的span var result node…

游戏风格化角色创建入门指南视频教程

游戏风格化角色创建入门指南视频教程 时间 33小时 包括项目文件 1920X1080 MP4 语言&#xff1a;英语中文字幕&#xff08;根据原英文字幕机译更准确&#xff09;原英文字幕 游戏中的风格化角色创建入门指南 百度一下 云桥网络 平台huo取 教程&#xff01; 信息。 教程33小…

Java学习总结:6

String类(接上篇) 字符串的拆分 public class Test1_1_2_1 {public static void main(String args[]){String str "hello world";String result[] str.split(" "); //以空格作为间隔for(int x0;x<result.length;x){System.out.print(result[x]"…

java面试常见问题之Hibernate总结

1 Hibernate的检索方式 导航对象图检索&#xff08;根据已经加载的对象&#xff0c;导航到其他对象。&#xff09; OID检索&#xff08;按照对象的OID来检索对象。&#xff09; HQL检索&#xff08;使用面向对象的HQL查询语言。&#xff09; QBC检索&#xff08;使…

HDU 4267 线段树 离散点区间更新, 自叶子节点至根单点查询

题意&#xff1a; n个数字 下面n个数字表示数列 2个操作 1 [u, v] k add [u,v ]区间 &#xff08;u点要计算&#xff09;每隔k个位置&#xff0c;该数字add 2 pos 询问 pos下标的值&#xff08;下标从1开始&#xff09; 思路&#xff1a; 因为k很小&#xff0c; 可以直接存 k…

Java学习总结:7

static关键字 一个类的主要组成就是属性和方法(分为构造方法和普通方法两种)&#xff0c;而每一个对象都分别拥有各自的属性内容(不同对象的属性保存在不同的堆内存中)&#xff0c;如果类中的某个属性希望定义为公共属性(即所有对象都可以使用的属性)&#xff0c;则可以在声明…

mybatis 使用resultMap实现数据库的操作

resultType:直接表示返回类型 resultMap&#xff1a;对外部resultMap的引用 二者不能同时使用 创建一个实体类Role和User public class Role {private Integer id;private String roleCode;private String roleName;//省略set、get方法 创建User类&#xff08;在User中有roleId…

【3DMax教程】三维产品可视化视频教程 3d Products Visualization Course

【3DMax教程】三维产品可视化视频教程 3d Products Visualization Course 三维产品可视化课程 教程大小&#xff1a;5.38G 1280X720 含课程素材文件 你会学到什么 项目简介及其必须包含的内容 蓝图以及如何获得和使用 逐步建模流程 如何制作UV和纹理 用UV投射材料 生成…

Spring MVC 和WebFlux 区别

本节主要对比了WebMvc 和 WebFlux两个Web框架,Spring已经为我们开发做了很大努力了,所以在合适的场景下这种异步框架还是非常可行的。但是还要考虑后期其它异步框架是否能够完善,全链路异步才能发挥异步最大的优势。

Cygwin鸡毛蒜皮

2019独角兽企业重金招聘Python工程师标准>>> Windows命令乱码: cygwin控制台mintty的编码缺省是UTF-8, 右键调整mintty选项[text] 改编码为GBK UNIX路径和Windows路径互转: 使用cygpath工具. 如: #cd cygpath C:\\Windows 安装包管理器apt-cyg: 安装: # svn --fo…

Using unique option prefix myisam-recover instead of myisam-recover-option

[转载]关于mysql error.log报"Using unique option prefix myisam-recover instead of myisam-recover-options ..."转载&#xff1a;http://blog.csdn.net/cloud_xy/article/details/21756601启动时日志中有这个警告的&#xff1a;[Warning] Using unique option pr…

Maya硬表面建模学习教程 Master Hard Surface Modeling in Maya 2020

Maya硬表面建模学习教程 Master Hard Surface Modeling in Maya 2020 流派:电子学习| MP4 |视频:h264&#xff0c;1280720 |音频:aac&#xff0c;48000 Hz 语言:英语 中文字幕&#xff08;机译&#xff09;原英文字幕 |大小:33.0 GB | 145节课程| (36h 18m) 你会学到什么 云…

Java学习总结:8

链表 class Node2{ //定义一个节点private String data;private Node2 next; //要保存的下一个节点public Node2(String data){ //每一个Node2对象都必须保存相应的数据this.datadata;}public void setNext(Node2 next){this.nextnext;}public Node2 getNext(){return this.…

(原创)c#学习笔记10--定义类成员03--接口的实现01--显示实现接口成员

10.3 接口的实现 在继续前&#xff0c;先讨论一下如何定义和实现接口。第9章介绍了接口定义的方式与类相似&#xff0c;使用的代码如下&#xff1a; interface IMyInterface {// Interface members. } 接口成员的定义与类成员的定义相似&#xff0c;但有几个重要的区别&#…