Bugs And Fixed

  • Bugs和解决方案

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

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

    方法:

    #test{overflow:hidden;height:1px;font-size:0;line-height:0;}

    IE6及更早浏览器之所以无法直接定义较小高度的容器是因为默认会有行高

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

    方法:

    #test{display:inline;}

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

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

    方法:

    #test{min-height:100px;_height:100px;}

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

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

    方法:

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

    方法:

    li{vertical-align:top;}

    除了top值,还可以设置为text-top | middle | bottom | text-bottom,甚至特定的<length><percentage>值都可以

  6. 如何解决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为浮动

  7. 如何解决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

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

    方法:

    div{width:300px;height:100px;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='*.png');}
    a{_position:relative;}

    解决方法是为容器内的链接定义相对定位属性position的值为relative

  9. 如何解决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;}

    换行:将整个花括号"{"规则区域换行。细节参见first-letterfirst-line选择符

  10. 如何解决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规则。

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

    BUG重现:

    div{color:#f00!important;color:#000;}

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

  12. 如何解决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

  13. 如何解决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

  14. 如何解决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

  15. 如何解决Chrome在应用transition时页面闪动的问题?

    方法:

    -webkit-transform-style:preserve-3d;或-webkit-backface-visibility:hidden;

    在Chrome下,使用过渡效果transition时有时会出现页面闪动

CSS3相关文章推荐

  • 前端开发博客
    前端开发博客:#CSS3#【CSS3卡牌旋转滑动效果】这个 CSS3 类似于幻灯片旋转的效果,是一个比较有意思并且比较受欢迎的特效。之前没有去研究过,无意在博客上看到 Wenzi 写了这个东西,来看看他的代码是怎么实现的。网页链接 #前端开发博客# ​
    3月21日 14:00来自caibaojian.com
    转发 (19) |评论 (2)
  • 硬不起来啦
    硬不起来啦:#css3#@font-face能引用多个字体吗?????
    3月7日 15:57来自vivo智能手机客户端
    转发 |评论
  • GitHub开发者
    GitHub开发者:弹性盒模型指南 作者:W.Y. @问崖不文雅 #CSS3# #Flexbox# Flexbox 布局是 CSS3 中一种新的布局模型,被称为弹性盒模型。该模型是为了改进容器中内容的对齐、方向和排序方式,即使是动态,甚至是未知大小的容器。弹性盒模型的主要特点是,可以在不同屏幕尺寸下以最佳的方式,修改其子项的高度或宽度来 ​
    3月4日 22:30来自微博 weibo.com
    转发 |评论
  • 前端开发博客
    前端开发博客:#CSS3#【CSS3硬件加速技巧】摘要:使用3D硬件加速提升动画性能时,最好给元素增加一个z-index属性,人为干扰复合层的排序,可以有效减少chrome创建不必要的复合层,提升渲染性能,移动端优化效果尤为明显。以下为原文:C...请戳→网页链接 #前端开发博客# ​
    2月17日 12:00来自caibaojian.com
    转发 (3) |评论
  • i程序媛媛
    i程序媛媛:【纯css3实现饼图动画】 注: 本案例来自 CSS Screct先看效果: 你可能需要掌握下列知识CSS3 Animation Pseudo Element 使用 linear-gradient 制作不渐变 currentColor (非必须) 使用 border-radius ‘除’语法(非必...#程序员的资料库##CSS##CSS3# 查看全文:网页链接
    2016-6-27 22:29来自程序员的资料库
    转发 |评论
  • i程序媛媛
    i程序媛媛:【最直观的方式学习flexbox属性】弹性盒模型(Flexbox Layout)是CSS3新增的一种布局模式。它可以很方便地用来改善动态或未知大小的子元素在父元素中的对齐,方向和顺序等等。flex容器的主要特性是...#程序员的资料库##Android##CSS##CSS3##Git##iOS# 查看全文:网页链接
    2016-6-27 20:00来自程序员的资料库
    转发 |评论
  • 课工场
    课工场:#css3# #html5# 发布了头条文章:《css体验优化之图片容器设置宽高比》 网页链接
    2016-6-27 16:57来自微博 weibo.com
    转发 |评论
  • 吴东元丶
    吴东元丶:【文章发布】css3中的word-wrap、word-break、white-space:最近在我的网站编辑文章的时候遇到了文字过长导致溢出的情况,这才发现我的css没加文字截断,然后加上word-break:break-all就搞定了。下面给大家介绍css3中控制文字换行的三个...#Css3# 查看全文:网页链接
    2016-6-27 15:32来自那樊笼
    转发 |评论
  • i程序媛媛
    i程序媛媛:【如何理解CSS的display属性】在布局中,display属性是最重要的CSS属性之一。其最常见的属性值有block,inline,none,table以及inline-block。最近的新宠为flex,因为它是专门为布局创建的display属性。...#程序员的资料库##CSS##CSS3##HTML5##Ruby# 查看全文:网页链接
    2016-6-24 09:18来自程序员的资料库
    转发 |评论
  • i程序媛媛
    i程序媛媛:【何时需要文档兼容模式】Windows Internet Explorer的每个主要版本都会增加新功能,目的是让浏览器更好用、更安全、更符合行业标准。随着功能的增多,很多旧网站面临无法正确显示的风险。本文介绍Windows I...#程序员的资料库##CSS##CSS3##HTML5# 查看全文:网页链接
    2016-6-20 12:27来自程序员的资料库
    转发 |评论
  • i程序媛媛
    i程序媛媛:【22个必须知道的css技巧】本文是 Gredswsh的技术生活 整理的 22个必须知道的css技巧, 作为偶尔也会涉猎前端开发的我来说,特别喜欢一些前端开发的总结性的文章,文末我也附上了其它几篇关于CSS技巧的文章。1、改变...#程序员的资料库##CSS##CSS3# 查看全文:网页链接
    2016-6-18 17:04来自程序员的资料库
    转发 |评论
  • 湖南高级网络营销师
    湖南高级网络营销师:一:谈谈html控制样式的弊端1.相同的样式效果,通过不同的属性来完成的例如颜色:<body text=""> <font color="">2.程序的可维护性不高。少的工作完成更多的事情就可称之为可维护性高通过css就能解决上述问...#css3# 网页链接
    2016-6-14 11:18来自360安全浏览器
    转发 |评论
  • 前端开发博客
    前端开发博客:【HTML5和CSS3代码生成器】这篇文章分享了一些比较常用的CSS3特效生成器,有按钮、边框、圆角、渐变、系统字体和阴影等,使用这些工具能够快捷的做出你想要的小特效,值得收藏使用...请戳→ 更多《#CSS3#教程》网页链接
    2016-6-6 19:27来自caibaojian.com
    转发 (29) |评论 (6)
  • 前端开发博客
    前端开发博客:【50个有用的CSS代码片段】For this article I want to present 50 handy CSS2/CSS3 code snippets for any...请戳→ 更多《#CSS3#教程》网页链接
    2016-5-30 22:27来自caibaojian.com
    转发 (22) |评论 (1)
  • 前端开发博客
    前端开发博客:【HTML5和CSS3代码生成器】这篇文章分享了一些比较常用的CSS3特效生成器,有按钮、边框、圆角、渐变、系统字体和阴影等,使用这些工具能够快捷的做出你想要的小特效,值得收藏使用...请戳→网页链接 更多《#CSS3#教程》网页链接
    2016-5-3 13:12来自caibaojian.com
    转发 (38) |评论 (3)
  • 空倪儿
    空倪儿:Experimenting with a new crown for Kawaii-CSS framework #css3##css##网页设计##网页UI# ​
    2016-4-25 16:01来自iPhone 6s
    转发 |评论
  • 前端开发博客
    前端开发博客:【【译】走向Retina Web】在深入细节之前,有必要先明确一些关键性概念。Device Pixels(设备像素)一个设备像素(或者称为物理像素)是显示器上最小的物理显示单元。在...请戳→网页链接 更多《#CSS3#教程》网页链接
    2016-4-21 22:36来自caibaojian.com
    转发 (6) |评论 (2)
  • 前端开发博客
    前端开发博客:【50个有用的CSS代码片段】For this article I want to present 50 handy CSS2/CSS3 code snippets for any...请戳→网页链接 更多《#CSS3#教程》网页链接
    2016-4-12 12:01来自caibaojian.com
    转发 (21) |评论 (5)
  • 前端开发博客
    前端开发博客:【学习css3动画属性Transition】发现在线的css3手册中都没有提到这个属性。应该是写得不全吧,不过搜索百度的时候发现第一个位置的那个的确是有的。赞一个。下面进入学习的阶...请戳→网页链接 更多《#CSS3#教程》网页链接
    2016-4-3 09:00来自caibaojian.com
    转发 (15) |评论 (3)
  • 前端开发博客
    前端开发博客:【css3变形属性transform】这个很简单,就跟border-radius一样,就是一个参数,同样是针对不同的浏览器有不同的私有属性。w3c上的例子是这样子写的:div{transform:...全文网页链接阅读更多相关《#CSS3#教程》网页链接
    2016-3-26 18:00来自caibaojian.com
    转发 (16) |评论 (2)