浏览器css bug及bug解决方法

Bugs及解决方案列表(以下实例默认运行环境都为Standard mode):

如何在IE6及更早浏览器中定义小高度的容器?

方法:

#test{overflow:hidden;height:1px;font-size:0;line-height:0;}
IE6及更早浏览器之所以无法直接定义较小高度的容器是因为默认会有行高

如何解决IE6及更早浏览器浮动时产生双倍边距的BUG?

方法:

#test{display:inline;}
当在IE6及更早浏览器中出现浮动后margin值解析为双倍的情况,设置该元素的display属性为inline即可。

如何在IE6及更早浏览器下模拟min-height效果?

方法:

#test{min-height:100px;_height:100px;}
注意此时#test不能再设置overflow的值为hidden,否则模拟min-height效果将失效

如何解决按钮在IE7及更早浏览器下随着value增多两边留白也随着增加的问题?

方法:

input,button{overflow:visible;}
如何解决IE7及更早浏览器下当li中出现2个或以上的浮动时,li之间产生的空白间隙的BUG?

方法:

li{vertical-align:top;}
除了top值,还可以设置为text-top | middle | bottom | text-bottom,甚至特定的和值都可以

如何解决IE6及更早浏览器下的3像素BUG?

方法:

.a{color:#f00;} .main{width:950px;background:#eee;} .content{float:left;width:750px;height:100px;background:#ccc;_margin-right:-3px;} .aside{height:100px;background:#aaa;}

content

aside

在IE6及更早浏览器下为.content设置margin-right:-3px;也可以设置.aside为浮动

如何解决IE6下的文本溢出BUG(江湖匪号:“谍影重重”或“一只猪的故事”)?

BUG重现:

.test{zoom:1;overflow:hidden;width:500px;} .box1{float:left;width:100px;} .box2{float:right;width:400px;}

↓这就是多出来的那只猪

运行如上代码,你会发现文字发生了溢出,在IE6下会多出一只“猪”。造成此BUG的原因可能是多重混合的,如浮动,注释,宽高定义等等。并且注释条数越多,溢出的文本也会随之增多。

列举几个解决方法:
删除box1和box2之间所有的注释;
不设置浮动;
调整box1或box2的宽度,比如将box的宽度调整为90px

如何解决IE6使用滤镜PNG图片透明后,容器内链接失效的问题?

方法:

div{width:300px;height:100px;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’*.png’);} a{_position:relative;}
解决方法是为容器内的链接定义相对定位属性position的值为relative

如何解决IE6无法识别伪对象:first-letter/:first-line的问题?

方法1:

p:first-letter {float:left;font-size:40px;font-weight:bold;} p:first-line {color:#090;}
增加空格:在伪对象选择符:first-letter/:first-line与包含规则的花括号”{“间增加空格。

方法2:

p:first-letter {float:left;font-size:40px;font-weight:bold;} p:first-line {color:#090;}
换行:将整个花括号”{“规则区域换行。细节参见E:first-letter和E:first-line选择符

如何解决IE8会忽略伪对象:first-letter/:first-line里的!important规则的问题?

BUG重现:

p:first-letter {float:left;font-size:40px;font-weight:bold;color:#f00!important;color:#090;}
如上代码,在IE8下color定义都会失效,原因就是因为有color使用了!important规则。鉴于此,请尽量不要在:first-letter/:first-line里使用!important规则。

如何解决IE6会忽略同一条样式体内的!important规则的问题?

BUG重现:

div{color:#f00!important;color:#000;}
如上代码,IE6及以下浏览器div的文本颜色为#000,!important并没有覆盖后面的规则,也就是说!important被忽略了。解决方案是将该样式拆分为2条,细节参见!important规则

如何解决IE6及更早浏览器下当li内部元素是定义了display:block的内联元素时底部产生空白的问题?

BUG重现:

a,span{display:block;background:#ddd;}

如上代码,IE6及更早浏览器每个li内部的内联元素底部都会产生空白。解决方案是给li内部的内联元素再加上zoom:1

如何解决IE6及更早浏览器下未定义宽度的浮动或绝对定位元素会被内部设置了zoom:1的块元素撑开的问题?

BUG重现:

#test{zoom:1;overflow:hidden;border:1px solid #ddd;background:#eee;} #test h1{float:left;} #test .nav{float:right;background:#aaa;} #test .nav ul{zoom:1;overflow:hidden;margin:0;padding:0;list-style:none;} #test .nav li{float:left;margin:0 5px;}

phpstudy

如上代码,IE6及更早浏览器div.nav会被设置了zoom:1的ul给撑开。

列举几个解决方法:
设置ul为浮动元素;
设置ul为inline元素;
设置ul的width

如何解决IE7及更早浏览器下子元素相对定位时父元素overflow属性的auto|hidden失效的问题?

BUG重现:

div{overflow:auto;width:260px;height:80px;border:1px solid #ddd;} p{position:relative;margin:0;}

如果我是相对定位,我的父元素overflow属性设置为auto|hidden将失效。如果你使用的是IE及更早浏览器,你将可以看到这个BUG

如果我是相对定位,我的父元素overflow属性设置为auto|hidden将失效。如果你使用的是IE及更早浏览器,你将可以看到这个BUG

如上代码,在IE7及更早浏览器下你会看到div的滚动条将无法工作。解决方案是给div也设置相对定位position:relative

时间: 2024-10-17 21:49:56

浏览器css bug及bug解决方法的相关文章

Android实际开发中的bug总结与解决方法(一)

                                                                             Android实际开发中的bug总结与解决方法(一) Android开发中有很多bug,我们是完全可以在线下避免的,不要等到线上报的BUG的再去修复.下面是我在实际开发中遇到过的bug和解决方法. BUG 1: java.lang.RuntimeException: Unable to start activity ComponentInfo

用Jquery动态append方式加入标签时Css样式丢失的解决方法

一般在Jquery中会用下面的方式来添加新标签: var obj = "<fieldset data-role='controlgroup' data-type='vertical' data-role='fieldcontain'> <input id='menu0" type='checkbox'/><label for='menu0'> 复选框 </label> </fieldset>";  //按个人要求拼接

bug集合及其解决方法

点击查看原文 1. java.lang.IllegalStateException: Expected a string but was BEGIN_ARRAY at line 1 column 278 解决:接口数据格式与实体类数据格式不一样 2. java.lang.RuntimeException: Unable to start activity ComponentInfo{com.wangll.activity/com.wangll.activity.MainActivityPerso

浏览器兼容的问题及解决方法收集收集

1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行 2. margin加倍的问题     设置为float的div在ie下设置的margin会加倍.这是一个ie6都存在的bug.解决方案是在这个div里面加上display:inline;    例如:    <#div id=”imfloat”>    相应的css为    #IamFloat{   

webpack2.0 引入.css文件报错解决方法

main.js文件引入 import './my-style.css' webpack.config.js 文件 之后莫名其妙报错: 解决方法 注意 先style再css,顺序问题,一定不能颠倒 { test: /\.css$/, loader: 'style-loader!css-loader' } 原因是应该是版本迭代的问题

微信内置浏览器直接下载APK的解决方法

最近很多朋友问我微信内置浏览器直接下载APK有没有什么解决办法?那么今天我就跟大家分享一下有关微信内直接下载APK的解决方法.微信作为一个通讯平台,使用人数一直稳居第一.也正因如此,微信成为了目前最具有营销价值和推广产品的渠道之一.但是使用过微信的人都知道,在微信里面,用户是不能直接下载APK的.原因很简单,腾讯为了自身利益,在微信中屏蔽了外来下载链接.最简单的解决方法,在微信中打开第三方链接或下载apk需要用户通过点击"微信右上角的三个点"然后选择在浏览器里面打开,如下图 就是因为这

Chrome 提标 您的浏览器限制了第三方Cookie...解决方法

最近升级Chrome后会出现  您的浏览器限制了第三方Cookie,这将影响您正常登录,您可以更改浏览器的隐私设置,解除限制后重试. 解决方法: chrome://flags/ 把这句复制到浏览器回车 SameSite by default cookies Cookies without SameSite must be secure 找到上面这两两项设置成 Disable即可 原文地址:https://www.cnblogs.com/Summer6/p/11671204.html

CentOS6.10部署的Tomcat8.5启动后,浏览器访问不到的解决方法

解决过程如下: 一.关闭 selinux 和 iptables 防火墙 二.查看 tomcat 是否在运行 ps aux |grep tomcat 三.查看端口情况 lsof -i:8080 查看后都是正常的 四.查看Tomcat的日志 cd /usr/local/tomcat-8.5.47/logs/ vim catalina.2019-11-23.log 打开日志,到最后一行,发现如下: Tomcat启动没有报错,而是停在了这一步,百度后,找到解决方法,有篇写的不错的文章:https://w

Monkey测试手机BUG重现及解决方法

1.1 Monkey测试简介 Monkey测试是Android平台自动化测试的一种手段,通过Monkey程序模拟用户触摸屏幕.滑动Trackball.按键等操作来对设备上的程序进行压力测试,检测程序多久的时间会发生异常. 1.2 Monkey程序介绍1) Monkey程序由Android系统自带,使用Java语言写成,在Android文件系统中的存放路径是:/system/framework/monkey.jar: 2) Monkey.jar程序是由一个名为"monkey"的Shell

数据库Bug集合及解决方法

1.在使用DataTable.select进行排序时,直接写DataRow[] drr = dt.Select("POSTPARID='" + node.Value.ToString() + "' order by  DISPINDEX ASC"); 这样写会报如题错误:“order”运算符后缺少操作数. 改成DataRow[] drr = dt.Select("POSTPARID='" + node.Value.ToString() + &qu