html页面css适配浏览器,整理常用CSS浏览器兼容问题及解决方法

矫情吗；* 2022-10-06 08:57 114阅读 0赞

CSS对阅读器的兼容性偶尔让人很头疼,也许当你熟谙之中的本领跟原理,就会感应也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并收拾整顿了一下.关于web2.0的过度,请只管即便用xhtml格式写代码,况且DOCTYPE 影响 DIV CSS措置,作为W3C的规范,一定要加 DOCTYPE申明.

CSS能力

1.div的垂直居中标题问题 vertical-align:middle; 将行距增多到与整个DIV异样高 line-height:200px; 接下来插入文字，就垂直居中了。毛病是要管制形式不要换行

2. margin更为的题目 配置为float的div在ie下配置的margin会越发。这是一个ie6都具有的漏洞。贪图方案是在这个div内中加之display:inline; 例如：

响应的css为

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

3.浮动ie制造生的双倍隔断

\#box\{ float:left; width:100px; margin:0 0 0 100px; //这类情况之下IE会发生200px的间隔 display:inline; //使浮动忽略\}

这里细说一下block与inline两个元素：block元素的特性是,总是在新行上起头,高度,宽度,行高,边距均可以控制(块元素);Inline元素的特点是,与其它元素在统一行上,不行管制(内嵌元素); \#box\{ display:block; //可认为内嵌元素模拟为块元素 display:inline; //完成同一行布列的成就 diplay:table;

4 IE与宽度和高度的问题 IE 不认得min-这个定义，但现实上它把畸形的width与height算作有min的状况来使。这样问题就大了，要是只用宽度与高度，畸形的浏览器里这两个值就不会变，若是只用min-width与min-height的话，IE下面根蒂等于不有设置宽度与高度。 例如要设置后盾图片，这个宽度是相比重要的。要管理这个问题，可以何等： \#box\{ width: 80px; height: 35px;\}html>body \#box\{ width: auto; height: auto; min-width: 80px; min-height: 35px;\}

5.页面的最小宽度 min -width是个十分利便的CSS呼吁，它可以指定元素最小也不克不及小于某个宽度，如许就可以包管排版不绝准确。但IE不认得这个，而它切实把width当做最小宽度来使。为了让这一饬令在IE上也能用，可以把一个

放到 标签下，往后为div指定一个类, 接下来CSS何等设计： \#container\{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );\} 第一个min-width是正常的；但第2行的width使用了Javascript，这只要IE才认得，这也会让你的HTML文档不太正规。它现实上颠末Javascript的果断来完成最小宽度。

6.DIV浮动IE文本发作3象素的漏洞 左边对象浮动，右侧采纳外补钉的左边距来定位，左边对象内的文本会离左边有3px的间距.