CSS常见Bugs及解决方案列表
以下实例默认运行环境都为Standard mode
如何在IE6及更早浏览器中定义小高度的容器?
方法:
#test{overflow:hidden;height:1px;font-size:0;line-height:0;}
IE6及更早浏览器之所以无法直接定义较小高度的容器是因为默认会有行高
如何解决IE6及更早浏览器浮动时产生双倍边距的BUG?
如何在IE6及更早浏览器下模拟min-height效果?
如何解决按钮在IE7及更早浏览器下随着value增多两边留白也随着增加的问题?
方法:
input,button{overflow:visible;}
如何解决IE7及更早浏览器下当li中出现2个或以上的浮动时,li之间产生的空白间隙的BUG?
方法:
li{vertical-align:top;}
除了top值,还可以设置为text-top | middle | bottom | text-bottom,甚至特定的<length>和<percentage>值都可以
如何解决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;}
<div class="main">
<div class="content">content</div>
<div class="aside">aside</div>
</div>在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;}
<div class="test">
<div class="box1"></div>
<!-- 注释 -->
<div class="box2">↓这就是多出来的那只猪</div>
</div>运行如上代码,你会发现文字发生了溢出,在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;}
<ul>
<li><a href="http://css.doyoe.com/">CSS参考手册</a></li>
<li><a href="http://blog.doyoe.com/">CSS探索之旅</a></li>
<li><a href="http://demo.doyoe.com/">web前端实验室</a></li>
<li><span>测试li内部元素为设置了display:block的内联元素时底部产生空白</span></li>
</ul>如上代码,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;}
<div id="test">
<h1>Doyoe</h1>
<div class="nav">
<ul>
<li><a href="http://css.doyoe.com/">CSS参考手册</a></li>
<li><a href="http://blog.doyoe.com/">CSS探索之旅</a></li>
<li><a href="http://demo.doyoe.com/">web前端实验室</a></li>
</ul>
</div>
</div>如上代码,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;}
<div>
<p>如果我是相对定位,我的父元素overflow属性设置为auto|hidden将失效。如果你使用的是IE及更早浏览器,你将可以看到这个BUG</p>
<p>如果我是相对定位,我的父元素overflow属性设置为auto|hidden将失效。如果你使用的是IE及更早浏览器,你将可以看到这个BUG</p>
</div>如上代码,在IE7及更早浏览器下你会看到div的滚动条将无法工作。解决方案是给div也设置相对定位position:relative
如何解决Chrome在应用transition时页面闪动的问题?
方法:
-webkit-transform-style:preserve-3d;或-webkit-backface-visibility:hidden;
在Chrome下,使用过渡效果transition时有时会出现页面闪动
CSS常见Bugs及解决方案列表的更多相关文章
- Bugs及解决方案列表
Bugs及解决方案列表(以下实例默认运行环境都为Standard mode): 如何在IE6及更早浏览器中定义小高度的容器? 方法: #test{overflow:hidden;height:1px; ...
- 各个浏览器CSS中的Bugs及解决方案
Bugs及解决方案列表(以下实例默认运行环境都为Standard mode): 如何在IE6及更早浏览器中定义小高度的容器? 方法: #test{overflow:hidden;height:1px; ...
- 前端进阶系列(二):css常见布局解决方案
水平居中布局 margin+定宽 <div class="parent"> <div class="child">Demo</di ...
- IE6中CSS常见BUG全集及解决方案——摘自网友
IE6中CSS常见BUG全集及解决方案 IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况.如外边距设置为10px, ...
- css CSS常见布局解决方案
CSS常见布局解决方案说起css布局,那么一定得聊聊盒模型,清除浮动,position,display什么的,但本篇本不是讲这些基础知识的,而是给出各种布局的解决方案.水平居中布局首先我们来看看水平居 ...
- asp.net MVC 常见安全问题及解决方案
asp.net MVC 常见安全问题及解决方案 一.CSRF (Cross-site request forgery跨站请求伪造,也被称为“one click attack”或者session rid ...
- IE6的那些css常见bug(汇总)
IE6的那些css常见bug(汇总) 我的微博终于在前几天建立了 虽说很早之前就知道博客园这个地方 但怕自己不能坚持去写一些东西一直没有建.这几天 我做了这个决定 把我的博客建起来 每周发一些看到的, ...
- css常见属性
css常见属性 1.颜色属性 1.1 color属性定义文本的颜色 1.2 color:green 1.3 color:#ff6600 可简写为#f60 1.4 color:rgb(255,255,2 ...
- JAVASCRIPT 浏览器兼容性问题及解决方案列表
JAVASCRIPT 浏览器兼容性问题及解决方案列表(1)获取HTML元素只兼容IE:document.all.hello hello 兼容所有: document.getElementById(“h ...
随机推荐
- 前段基础之CSS
本文参考:https://www.cnblogs.com/ctztake/p/7577436.html CSS 语法 CSS规则由两个主要的部分构成:选择器,以及一条或多条声明. ''' select ...
- Node.js的模块系统
编写稍大一点的程序时一般都会将代码模块化.Node.js提供了一个简单的模块系统.模块既可能是一个文件,也可能是包含一个或多个文件的目录. 模块的创建 如果模块是个文件,一般将代码合理拆分到不同的J ...
- MySQL报错InnoDB: A long semaphore wait【转】
mysql登录后无法执行命令如show processlist 查看MySQL错误日志 参考以下方法,执行 1.系统层面 [root@pisphkdcbsql01 ~]# cat /proc/sys/ ...
- python3+selenium入门02-操作火狐浏览器
使用selenium打开浏览器的时候,需要先去selenium官网下载一个对应浏览器的的driver插件.selenium下载.官网在国外可能打不开.或者可以从我网盘下载,但可能不是最新的网盘链接.将 ...
- mongodb 创建更新语法
创建文档 向MongoDB插入数据,使用insert, 如:db.refactor.insert({"refactor's blog":"http://www.cnblo ...
- 深度神经网络(DNN)是否模拟了人类大脑皮层结构?
原文地址:https://www.zhihu.com/question/59800121/answer/184888043 神经元 在深度学习领域,神经元是最底层的单元,如果用感知机的模型, wx + ...
- K-query SPOJ - KQUERY 离线 线段树/树状数组 区间大于K的个数
题意: 给一个数列,一些询问,问你区间$[l.r]$大于$K$的个数 题解: 又一个"人尽皆知傻逼题"? 我们用一个01序列表示当前询问时,该位置的数字是否对答案有贡献, 显然,对 ...
- Ionic-轮播图ion-slide-box
官方用法介绍:http://www.ionic.wang/js_doc-index-id-44.html 用法 <ion-slide-box> <ion-slide> < ...
- ansible笔记(12):handlers的用法
ansible笔记():handlers的用法 这篇文章会介绍playbook中handlers的用法. 在开始介绍之前,我们先来描述一个工作场景: 当我们修改了某些程序的配置文件以后,有可能需要重启 ...
- 讨论HTTP POST 提交数据的几种方式
转自:http://www.cnblogs.com/softidea/p/5745369.html HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS.GET.HEAD.POST.PU ...