《dreamweaver制作网页技巧 (13)》由会员分享，可在线阅读，更多相关《dreamweaver制作网页技巧 (13)（5页珍藏版）》请在金锄头文库上搜索。
1、div+css浮动下降IE与Firefox兼容性IE6 的BUG 真让人头疼。整理一些浏览器兼容问题，以备不时之需。1.图文混排，容易导致 扩展框问题.扩展框问题这样排版容易导致 扩展框问题. 尽量定义宽高给定值：* 浮动下降问题size=+0 加上 float：left； 即可 2.IE6的双倍边距BUG ：解决办法是加上display:inline定义页面内容显示方式的属性有两个：display属性和visibility属性。display属性是用来确定页面元素是否显示和显示方式。display 属性规定元素应该生成的框的类型。display属性的取值很多，我们仅将比较常用的一些做一下介绍
2、。none：隐藏对象，同时元素所占有的空间也被清除了。block：定义元素为块对象。inline：定义元素为内联对象。将对象强制作为内联对象呈递，从对象中删除行list-item：定义元素为列表项目。inline-table:CSS2未支持。将表格显示为无前后换行的内联对象或内联容器所有可视的文档对象都是块对象(block element)或者内联对象(inline element)。例如， div 是一个块对象。 span 是一个内联对象。块对象的特征是从新的一行开始且能包含其他块对象和内联对象。内联对象被呈递时不会从新行开始，能够包含其他内联对象和数据。改变此属性值对其周围内容布局的影响可
3、能是：在属性值设为 block 的对象后面添加新行。从属性值设为 inline 的对象中删除一行。隐藏属性值设为 none 的对象并释放其在文档中的物理空间。3.IE6下为什么图片下方有空隙产生解决这个BUG的方法也有很多，可以是改变html的排版，或者设置img 为display:block或者设置vertical-align属性为vertical-align:top | bottom |middle |text-bottom都可以解决.4.IE6下这两个层中间怎么有间隙这个IE的3PX BUG也是经常出现的，解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.l
4、eft5.如何对齐文本与文本输入框遇到此种问题，设置文本框的 vertical-align:middle 就可以了6.为什么FF下文本无法撑开容器的高度size=+0 标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义：height:auto!important;height:200px;min-height:200px;7.怎么样才能让层显示在FLASH之上呢解决的办法是给FLASH设置透明或者8.怎样使一个层垂直居
5、中于浏览器中使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二.方法二:首先在父级元素定义text-align: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上margin-right: auto; margin-left: auto; 需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义margin-right: auto; margin-left: auto;就可以了。width:300
6、px;margin-left:auto;margin-right:auto;9.针对firefox ie6 ie7的css样式现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针对IE7不错的hack方式就是使用*+html，现在用IE7浏览一下，应该没有问题了。现在写一个CSS可以这样：#1 color: #333; * html #1 color: #666; *+html #1 color: #999; 那么在firefox下字体颜色显示为#333，IE6下字体颜色显示
7、为#666，IE7下字体颜色显示为#999。10.页面的最小宽度min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个 放到 标签下，然后为div指定一个类：然后CSS这样设计：#containermin-width: 600px;width:expression_r(document.body.clientWidth 600? 600px: auto );第一个min-width是正常的；但第2行的width使用了Javascript，这只有
8、IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。属性选择器(这个不能算是兼容,是隐藏css的一个bug)piddivid这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如pid中,所有p标签中有id的都是同样式的.最狠的手段 - !important;如果实在没有办法解决一些细节问题,可以用这个方法.FF对于!important会自动优先解析,然而IE则会忽略.11.关于容器的包涵关系很多时候，尤其是容器内有平行布局，例如两、三个fl
9、oat的div时，宽度很容易出现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。1)写两句代码来控制一个属性，区别Firefox与IE：background range;*background:green;/这一句代码写出来时，你用Firefox浏览，会发现背景是橙色的，而IE里却是绿色的，很简单，因为Firefox不能识别*，而IE6，IE7都可以识*,标准浏览器(如Firefox,Opera,Netscape)不能识别*;。2)写两句代码来控制一个属性，区别IE7与IE6：background:green !important;background:blue;/这一句代码写出来时，你用IE7浏览，会发现，写了该代码的区域背景是绿色的，如果用IE6浏览，却是蓝色的，这是因为IE7能识别!important*，一但识别了，就执行，忽略了后面的那一句，但IE6却不能识别!important，所以前面部分跳过，直接执行了后半部份.
