常见div css 不兼容的解决方法

Server 林涛 1217℃ 0评论

目前,浏览器市场主要分为IE6、IE7、IE8、IE9、Firefox、Chrome、Safari以及Opera五大阵营。所以在页面开发中经常会碰到不兼容的问题,这里举出一些问题的解决方法:

一、margin加倍的问题。
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline;
例如:

<#div id=”imfloat”></#div>

相应的css为

#IamFloat{
float:left;
margin:5px;/*IE6下理解为10px*/
display:inline;/*IE6下再理解为5px*/}

二、在CSS中加入overflow:hidden;可以灵活运用,不止防止内容溢出。还可以清除浮动。
例如:<div>
<div>123</div>
<div>456</div>
</div>
样式:
.abc{width:500px; border:1px #000000 solid;}
.b{float:left; width:240px; height:300px; background-color:#CCCCCC; margin-left:10px; display:inline;}
www.hukou51.com网站这段代码在IE里显示是没有问题的,但是在火狐下abc的高度并没有被b的高度撑开,如果给.abc加上overflow:hidden;则可以正常显示。

三、关于页面中的CLASS应用
代码要简洁,尽量多使用标签元素,比如
<div class=”abc”>
<ul>
<li>111111<span>2222</span></li>
</ul>
</div>

这段div中的CSS就可以写成:
.abc{}
.abc ul{}
.abc ul li{}
.abc ul li span{}
页面中有些文件的li和span都加上了class,其实如上述写法会为页面节省一部分代码空间。

四、连续的英文或数字能使容器被撑大,不能根据容器的大小自动换行。解决方法:《css之自动换行》 。连续的标点符号也不会转行,用属性 word-break:break-all; 无法达到效果,可以选用属性 word-wrap: break-word; 来解决!

五、white-space:nowrap; 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。

六、CSS hack(浏览器兼容):区分IE6,IE7,firefox(火狐)
区别IE6与FF:
background:orange;*background:blue;

区别IE6与IE7:
background:green !important;background:blue;

区别IE7与FF:
background:orange; *background:green;

区别FF,IE7,IE6:
background:orange;*background:green !important;*background:blue;

#demo div{
width:50px; /* FireFox 有效 */
+width:60px; /* IE 7 有效 */
_width:70px; /* IE 6 有效 */
}

七、解决div在(火狐浏览器)firefox下高度自动适应问题

为BOX加上属性: overflow:hidden

<div id=”Box” style=”width:100%;background-color:green;overflow:hidden ;”>
<div id=”left” style=”float:left;background-color:#333333;width:100px”>左左左左左左左左左左左左左左左左左左左左</div>
<div id=”right” style=”float:left; “>右右</div>
</div>

八、页面中有一些是DIV里再套DIV,其实我们应该注意标签语义化,不能让我们的页面都是一味的DIV嵌套出来。例如,不能将标题放到DIV里,而不去使用H1-H6,页面中的标签:如H1-H6为标题标签,DIV为区隔标记(设定区块的摆放位置),UL LI为无序号的清单列表,OL LI为有序号的清单列表,DL DT DD为定义式清单(页面中的图文列表基本上就用这个标签),<span>为行内元素标签(<div>为大容器,大容器当然可以放一个小容器了,<span>就是小容器。),<em> <i>标签,这两个标签可以用在一段文字或一行文字中突出颜色字的样式,<p>为内容文章标签。

如需转载请注明: 转载自26点的博客

本文链接地址: 常见div css 不兼容的解决方法

转载请注明:26点的博客 » 常见div css 不兼容的解决方法

喜欢 (0)
发表我的评论
取消评论

表情