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 Object-fit和Object-position

当然也有修复的方法,但所有人都在说:媒体调整的行为将会失控!是的,现在我们将要解决这个问题。CSS标准提出属性object-fit和object-positio...4月6日

15个无比华丽的HTML5/CSS3动画应用

未来的Web将会是由HTML5主导,当然作为开发者对这一喜讯更为动心。本文主要分享了15个无比华丽的HTML5/CSS3动画应用,供大家参考学习。1...6月6日

一个栗子上手CSS3动画

列举CSS3动画的属性,若需要了解API,可前往MDN。作者:伯乐在线来源:前端大全|2017-05-1115:20最近杂七杂八的事情很多,很多知识都没来得及总结...5月11日

200页的前端开发面试题整理版之HTML5+CSS3(四)

+CSS31.CSS3有哪些新特性?1.CSS3实现圆角(border-radius),阴影(box-shadow),2.对文字加特效(text-shadow、)...4月4日

我们来做一个beautiful的css3鼠标悬停效果

其实一个冒号跟两个冒号没有本质的区别,都是表示在什么什么之前,他这么写主要只是为了区分css2和css3,也就是ie和主流浏览器...4月23日

纯CSS3画出小黄人并实现动画效果

前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分...5月3日

精选10款超酷的HTML5/CSS3菜单

款超酷的HTML5/CSS3菜单,给你的网页添加不一样的精彩,一起来围观一下吧。1、CSS3手风琴菜单下拉展开带弹性动画利用CSS3技术可以实现各种各样的网页菜单...5月24日

网站设计中10个经典的CSS3动效库

深圳网站设计公司科慧设计一般会在网站中加入一些简单而一致的动效,我所用的技术则是用SASS+bourbon来生成出那些基于CSS3的动画效果来...5月11日

纯CSS3做炫酷环形星星发光动画,在简单没思路你也做不出来

这个特效是用CSS3制作的,虽然录制的图片出来看起来很卡,但是实际上还是很顺畅的。想要更多的企业求职加分项目,案例,学习方法可以来一下我的前端群611256580...5月23日

从矩阵与空间操作的关系理解CSS3的transform

不得不提到CSS3的transform,也就是变换。这篇文章概括了在实现时对transform的理解与总结。注:文中的图片多数截取自视频:线性代数的本质...5月13日

移动互联网之路HTML5+CSS3+jQueryMobileAPP与移动网站设计从入门到精通PDF

移动互联网之路(附光盘HTML5+CSS3+jQueryMobileAPP与移动网站设计从入门到精通)(光盘1张)》从实际应用的角度出发,系统地介绍了HTML5...5月17日

css3实现掷骰子(无图)

下面用css3实现的掷骰子效果,骰子点数、面和转动效果都是有css,css3完成的。截图如下:Paste_Image.png1.模板如下:/*span是点数*/2...4月19日

HTML5+CSS3技术(二)CSS使用方法和选择器

css->基础知识HTML负责网页的内容,CSS负责网页的样式,可以减少网页代码量,更能提高网络访问网页的速度...5月26日

精美CSS3聊天窗口 实用的Tooltip和自定义滚动条

这次我们要分享一款基于CSS3和HTML5的自定义聊天窗口,这里要声明的是它并不能完成聊天的功能,只是提供了聊天窗口的UI,包括,聊天语句的Tooltip样式...3月10日

详解用CSS3制作圆形滚动进度条动画效果

家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客《CSS实现进度条和订单进度条》,但是呢...2月9日

实现CSS3炫酷的效果可以借助哪些工具

要了解CSS3首先要了解各种浏览器对CSS3支持的情况及目前浏览器的市场占有率情况。截止2016年12月,Chrome(webkit)40.52%、IE814...3月5日

基于CSS3 column多栏布局实现水平滑页翻页交互

星期三,00:10,归类于css相关。阅读74次,今日74次byzhangxinxufromhttp://www...2月15日

CSS·导航条分享到:导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些。简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理...2016年12月19日

CSS3参考手册,全网最新最全的CSS3参考手册,为你呈现最好的CSS3文档CSS3参考手册