浏览器常见bug及解决办法

常见的bug列表：

IE6下，当块级元素 margin与float同方向时，margin会加倍例如 .box{float:left;margin-left:10px;}在IE6下表现的margin-left是20px,这时的解决办法设置display:inline; 要深入理解margin双边距bug产生的条件。
img在所有浏览器下边有空白通用解决办法 img{vertical-align:top;},当然也有其他解决办法参照笔记 img标签下边空白解决方案
img元素在ie浏览器下有默认边框通用解决办法 img{border:0 none;} 综合2，3解决这两个bug可以在公用样式中这样定义 img{bordr:0 none;vertical-align:top; }
多个行内元素都设置成display:inline-block;时元素之间有空格解决办法设置父元素的font-size:0;再重新声明父元素的子元素的字体大小
块级元素设置display:inline-block;在IE6/7下不能正确显示 *display: inline;*zoom: 1;

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>inline-block</title><link rel="stylesheet" type="text/css" href="../css/css.css"/><style type="text/css">.span1,.span2,.div1,.div2{display: inline-block; width: 100px; height: 100px;}.span1,.div2{ background: blue; }.span2,.div1{background: red;}.div1,.div2{*display: inline;*zoom: 1;}/**display: inline;*zoom: 1;*/</style></head><body><div class="box"><span class="span1">span1</span><span class="span2">span2</span><div class="div1">div1</div><div class="div2">div2</div></div><div>块级元素的display:inline-block IE6/7 不支持，解决办法 *display:inline;*zoom:1;</div></body>
</html>

IE6不识别min-height(max-height)属性，解决办法 .box{min-height:100px;_height:100px;}, 此时一定不能再设置overflow的值为hidden，否则模拟min-height效果将失效
IE6下，当浮动元素与非浮动元素相邻时，这个3像素的Bug就会出现我还没搞清楚==
ul li a 列表时，设置a的display:block让a充满li的区域增大点击区域 IE6下li之间会有间距，解决办法为a设置height或者设置zoom:1;触发IE下的hasLayout

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0; padding: 0;}ul,ol{list-style: none;}li a{background: blue; display: block;height: 30px; }</style></head><ul><li><a href="#">99</a></li><li><a href="#">99</a></li><li><a href="#">99</a></li><li><a href="#">99</a></li><li><a href="#">99</a></li><li><a href="#">99</a></li><li><a href="#">99</a></li><li><a href="#">99</a></li><li><a href="#">99</a></li></ul><body></body>
</html>

游标手指cursor cursor: pointer 可以同时在 IE FF 中显示游标手指状，cursor:hand; 仅 IE中有效,所以用css设置鼠标手形时都统一用cursor:pointer;
在制作一个表格时一般将table放入一个div中，这时table宽度不能充满父div,这时要设置table{width:100%;}

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表格</title><link rel="stylesheet" type="text/css" href="../css/css.css"/><style type="text/css">.tab_cont table{width: 100%;}.tab_cont th,.tab_cont td{border: 1px solid #ccc;padding: 5px 0;}.tab_cont tr{ text-align: center;}h1,p{text-align: center; font-weight: bold;color: red;}tr:hover{background: #666; color: #fff;}.gray{background: #F8F8F8;}thead tr{background: #999; color: #fff;}</style></head><body><h1>表格的制作方法</h1><div class="layout tab_cont"><table><thead><tr><th>Header</th><th>Header</th><th>Header</th><th>Header</th></tr></thead><tr class="gray"><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr><tr class="gray"><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr><tr class="gray"><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr><tr class="gray"><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr><tr class="gray"><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr></table></div><div><p>一定要设置table的width:100%让table充满父div,不设置不能充满</p><p>单元格只对padding有效，对margin无效</p></div></body>
</html>

万能的zoom:1;当在IE6下遇到奇葩的问题不能解决时，试试zoom:1 它可以触发ie6的hasLayout而不影响其他浏览器的正常表现

CSS属性Hack写法

1、IE6浏览器

.demo {_color: red;}

2、IE6-7浏览器识别

.demo {*color: red;}

3、所有浏览器除IE6浏览外

.demo {color/**/:red;}

4、IE6-9浏览器

.demo {color: red9;}

5、IE7-8浏览器

.demo {color/***/:red9;}

转载于:https://www.cnblogs.com/asunzhang/p/5981387.html

浏览器常见bug及解决办法相关推荐

css文本省略（······）行高错位（bug）- 解决办法
应用css文本省略(······)属性:-webkit-line-clamp: 3; 导致:行高错位.(F12查看发现css属性line-height的值并没变,但为什么浏览器显示文本的实际行距却变小 ...
ie6 7 8下的一些bug和解决办法
1:li边距"无故"增加任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑 ...
Android 常见异常及解决办法
Ø 前言本文主要记录 Android 的常见异常及解决办法,以备以后遇到相同问题时可以快速解决. 1. java.lang.NullPointerException: Attempt to i ...
关于浏览器兼容问题的解决办法，全部都在这里了
关于浏览器兼容问题的解决办法,全部都在这里了参考文章: (1)关于浏览器兼容问题的解决办法,全部都在这里了 (2)https://www.cnblogs.com/myprogramer/p/6624 ...
Dumpzilla工具第615行bug的解决办法
Dumpzilla工具第615行bug的解决办法在Dumpzilla使用选项frequency时,会提示SQL语法错误.这是由于其中SQL语句编写错误.需要将615行中: where url lik ...
ie不显示html图片不显示,IE浏览器图片显示不出来 IE浏览器图片不显示解决办法...
很多人在使用ie浏览器打开网页时,发现所有的图片都是不显示出来的,可能重置之后浏览器图片显示不出来,也有可能是在ie浏览器设置中,没有启用显示图片选项,如果没有图片显示的话,该如何设置让图片显示出来呢 ...
VS2019运行OpenGL时出现的常见错误及解决办法
OpenGL程序在低版本的VS中运行成功,但在VS2019中运行却出现各种错误,以下是常见错误的解决办法.(文章结尾有库的链接哟~) 问题一:无法打开文件"glaux.lib" 解 ...
VLOOKUP常见错误及解决办法
35-VLOOKUP常见错误及解决办法 2021-08-18 13:11 VLOOKUP是一个非常实用的查找函数,但在实际使用过程中,往往会出现这样那种的错误而得到不正确的结果. [这里备注下,如果你 ...
金蝶专业版过账提示运行时错误5_金蝶专业版过账提示运行时错误5_金蝶KIS专业版常见故障及解决办法...
金蝶KIS专业版常见故障及解决办法金蝶KIS专业版常见故障有哪些你知道吗?你对金蝶KIS专业版常见故障了解吗?你知道如何解决金蝶KIS专业版常见故障吗?下面是yjbys小编为大家带来的关于金蝶KIS ...

浏览器常见bug及解决办法

浏览器常见bug及解决办法相关推荐

最新文章

热门文章