浏览器兼容问题1

来源：互联网发布：青瓦台风水知乎编辑：程序博客网时间：2024/06/03 22:56

1、img的兼容性

在IE7环境下img默认有边框，所以img都要加上border:none;

2、IE下浮动的兼容性问题

1）、在Ie6下，内容会把父元素设置好的宽高撑开（若有浮动，撑开后会自动换行）。所以设置宽高度时计算一定要精确，或者加上超出隐藏的特性解决兼容性问题。

<html lang="en"><!--语言为英语--><head><!--头部--><meta charset="UTF-8"><!--字符编码：utf-8国际编码  gb2312中文编码--><meta name="Keywords" content="关键词"><meta name="Description" content="描述"><title>Document</title><style>/*css样式表的衣柜*/*{margin:0px;padding:0px;}/*去除默认外边距、内边距*/.box{width:400px;}.left{width:200px;height:210px;background:red;float:left}.right{width:200px;float:right;/*overflow:hidden;*//*z添加一个超出隐藏解决兼容*/}.div{width:180px;height:180px;background:blue;padding:25px;}</style></head><body><!--身体--><div class="box"><div class="left"></div><div class="right">    <span style="font-family: Arial, Helvetica, sans-serif;"><!--right宽度设定值为200，但子元素div给其撑到210，因此在Ie6下将自动换行显示--></span><div class="div"></div></div></div><!--在Ie6下，内容会把父元素设置好的宽高撑开（若有浮动，撑开后会自动换行）。所以设置宽高度时计算一定要精确，或者加上超出隐藏的特性解决兼容性问题--></body>,</html>

2）、在IE6下浮动的块级元素的默认属性不会被清掉，因此多个块级元素浮动后都会默认换行显示。在IE6元素浮动，若果宽度需要内容撑开，里面块级元素的内容也要加浮动。

<!doctype html><!--声明当前文档为html文档--><html lang="en"><!--语言为英语--><head><!--头部--><meta charset="UTF-8"><!--字符编码：utf-8国际编码  gb2312中文编码--><meta name="Keywords" content="关键词"><meta name="Description" content="描述"><title>Document</title><style>/*css样式表的衣柜*/*{margin:0px;padding:0px;}/*去除默认外边距、内边距*/.box{width:400px;}.left{width:200px;height:210px;background:red;float:left}.right{width:200px;float:right;overflow:hidden;/*overflow:hidden解决兼容*/}.div{width:180px;height:180px;background:blue;padding:25px;}</style></head><body><!--身体--><div class="box"><div class="left"></div><div class="right"><div class="div"></div></div></div><!--在Ie6下，内容会把父元素设置好的宽高撑开。计算一定要精确或者加overflow:hidden解决--></body></html>

3、段落P标签内不能再嵌套段落p标签或者标题h标签

<!doctype html><!--声明当前文档为html文档--><html lang="en"><!--语言为英语--><head><!--头部--><meta charset="UTF-8"><!--字符编码：utf-8国际编码  gb2312中文编码--><meta name="Keywords" content="关键词"><meta name="Description" content="描述"><title>Document</title><style>/*css样式表的衣柜*/*{margin:0px;padding:0px;}/*去除默认外边距、内边距*/p{width:50px;height:20px;background:red;margin:10px 0px;}h3{width:50px;height:20px;background:blue;margin:10px 0px;}</style></head><body><!--身体--><p><p>123</p><h3>123<h3></p></body></html>

4、a标签内不能再嵌套a标签

<!doctype html><!--声明当前文档为html文档--><html lang="en"><!--语言为英语--><head><!--头部--><meta charset="UTF-8"><!--字符编码：utf-8国际编码  gb2312中文编码--><meta name="Keywords" content="关键词"><meta name="Description" content="描述"><title>Document</title><style>/*css样式表的衣柜*/*{margin:0px;padding:0px;}/*去除默认外边距、内边距*/</style></head><body><!--身体--><a href="https://www.baidu.com/">百度<a href="https://www.baidu.com/s?wd=%20haslayout%20&rsv_spt=1&rsv_iqid=0xac6ef99100023d5d&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=0&oq=css%20zoom&inputT=1328&rsv_t=9604QjO2PXw1bBTsJDYUdWoq66XyC7lsLJlfjjZY%2FrBMIlPQOTs0H6YXr5SXX1XL%2Fw4g&rsv_n=2&rsv_pq=cdb3ff220002386d&rsv_sug3=11&rsv_sug1=10&rsv_sug4=1328">点击跳转</a></a></body></html>

5、IE6下最小高度问题：当height<19px的时候会被当作19px来处理，解决办法：overflow:hidden

<!doctype html><!--声明当前文档为html文档--><html lang="en"><!--语言为英语--><head><!--头部--><meta charset="UTF-8"><!--字符编码：utf-8国际编码  gb2312中文编码--><meta name="Keywords" content="关键词"><meta name="Description" content="描述"><title>Document</title><style>/*css样式表的衣柜*/*{margin:0px;padding:0px;}/*去除默认外边距、内边距*/.box{height:2px;background:red;overflow:hidden}</style></head><body><!--身体--><div class="box"></div><!--IE6下最小高度问题：当height<19px的时候会被当作19px来处理解决办法：overflow:hidden--></body></html>

6、border:1px dotted ;IE6不支持(IE6下不支持宽度为1px 形状为虚线的边框（会默认改为虚线的边框），当宽度改为2px的时候支持)。

解决办法：切背景平铺

<!doctype html><!--声明当前文档为html文档--><html lang="en"><!--语言为英语--><head><!--头部--><meta charset="UTF-8"><!--字符编码：utf-8国际编码  gb2312中文编码--><meta name="Keywords" content="关键词"><meta name="Description" content="描述"><title>Document</title><style>/*css样式表的衣柜*/*{margin:0px;padding:0px;}/*去除默认外边距、内边距*/.box{width:100px;height:100px;border:1px dotted red;margin:100px auto;}</style></head><body><!--身体--><div class="box"></div><!-- border:1px dotted ;IE6不支持解决办法：切背景平铺--></body></html>

7、IE6下，父元素用边框，子元素的margin会消失，解决办法：触发父元素的haslayout(jishi);

<!doctype html><!--声明当前文档为html文档--><html lang="en"><!--语言为英语--><head><!--头部--><meta charset="UTF-8"><!--字符编码：utf-8国际编码  gb2312中文编码--><meta name="Keywords" content="关键词"><meta name="Description" content="描述"><title>Document</title><style>/*css样式表的衣柜*/*{margin:0px;padding:0px;}/*去除默认外边距、内边距*/.box{background:red;border:1px solid red;zoom:1;/*padding:1px;*/}.div{width:200px;height:200px;background:blue;margin:100px}</style></head><body><!--身体--><div class="box"><div class="div"></div></div><!--IE6下，父元素用边框，子元素的margin会消失解决办法：触发父元素的haslayout;--></body></html>

8、IE6双边距bug：横向的margin值会被放大为两倍，解决方法：display:inline;

<!doctype html><!--声明当前文档为html文档--><html lang="en"><!--语言为英语--><head><!--头部--><meta charset="UTF-8"><!--字符编码：utf-8国际编码  gb2312中文编码--><meta name="Keywords" content="关键词"><meta name="Description" content="描述"><title>Document</title><style>/*css样式表的衣柜*/*{margin:0px;padding:0px;}/*去除默认外边距、内边距*/.box{width:200px;height:200px;background:red;float:left;margin:100px;display:inline;}</style></head><body><!--身体--><div class="box"></div><!--IE6双边距bug：横向的margin值会被放大为两倍解决方法：display:inline;--></body></html>

9、IE6下外边距消失：当父元素的宽度和一行内容的宽度的差别>3px的时候

<!doctype html><!--声明当前文档为html文档--><html lang="en"><!--语言为英语--><head><!--头部--><meta charset="UTF-8"><!--字符编码：utf-8国际编码  gb2312中文编码--><meta name="Keywords" content="关键词"><meta name="Description" content="描述"><title>Document</title><style>/*css样式表的衣柜*/*{margin:0px;padding:0px;}/*去除默认外边距、内边距*/.box{float:left;border:10px solid #000;width:600px;}.box div{width:100px;height:100px;background:red;margin:20px;border:5px solid blue;float:left;display:inline;}</style></head><body><!--身体--><div class="box"><div>1</div><div>2</div><div>3</div><div>4</div><div>1</div><div>2</div><div>3</div><!--<div>3</div>--></div>IE6下外边距消失：当父元素的宽度和一行内容的宽度的差别>3px的时候--></body></html>

10、IE6，7下 li本身没有浮动，但是li里面的内容有浮动，每个li下边就会产生一个间距

解决办法：1、给li添加 vertical-align:top
2、给li添加浮动

<!doctype html><!--声明当前文档为html文档--><html lang="en"><!--语言为英语--><head><!--头部--><meta charset="UTF-8"><!--字符编码：utf-8国际编码  gb2312中文编码--><meta name="Keywords" content="关键词"><meta name="Description" content="描述"><title>Document</title><style>/*css样式表的衣柜*/*{margin:0px;padding:0px;}/*去除默认外边距、内边距*/ul{width:}li{list-style:none;height:30px;border:1px solid #000;/*vertical-align:top*/;float:left;}a{width:100px;height:30px;float:left;background:red;}span{width:100px;height:30px;float:right;background:blue;}</style></head><body><!--身体--><ul><li><a href="#"></a><span></span></li><li><a href="#"></a><span></span></li><li><a href="#"></a><span></span></li><li><a href="#"></a><span></span></li><li><a href="#"></a><span></span></li><ul><!--IE6，7下 li本身没有浮动，但是li里面的内容有浮动，每个li下边就会产生一个间距解决办法：1、给li添加 vertical-align:top  2、给li添加浮动--></body></html>

0 0