云南龙网

  1. 首页 > 云知道 > >

浏览器兼容之旅第三站:IE常见Bug总结及修复方法—part1( 二 )

云知道



三、设置元素的最小高度和最小宽度
在Web页面设计中，有时为了达到元素的的统一渲染的风格，我们有时需要使用min-height和min-width来控制元素的最小高度和最小宽度值 。在别的浏览器都运行正常，可唯独这个IE6不识别人家 。因此在使用min-height和min-width时，为了达到效果一致，我们要针对IE6另作处理 。其中min-height解决起来相当简单，但是min-width在IE6下要顺利解决就有点麻烦（关于IE6下的min-width放到后面一起探讨）这里我们主要来看min-height的解决办法 。
采用!important方法修复
第一种方法采用的是!important来解决，让min-height在IE6下能正常工作，具体代码如下：

复制代码代码如下:
.demo {
min-height: 100px;
height: auto !important;/*现代浏览器下，内容高度超过100px时自动获得其高度*/
height: 100px;/*此值设置和min-height值一样，因为IE6下元素高度会根据内容自己的高度而定，所以内容高度低于min-height值时，为了达到min-height效果，需要给元素一个显式的高度值*/
}

采用子选择器方法来修复
大家都知道IE6是不支持子选择器的，所以我们也可以使用这个方式来解决min-height在IE6下效果

复制代码代码如下:
.demo {
min-height: 100px;
height: 100px;
}
html body .demo {
height: auto;/*只有现代浏览器才能识别*/
}

四、块元素水平居中
元素居中，大家都有碰到过，有时也有不少童鞋会问，怎么我的div元素在IE6下不能居中呢？其实这个Bug并不是什么时候都会发生的，据我查阅相关资料和多次测试，这个Bug只会发生在IE6怪癖模式下，知道问题出在什么地方，那解决起来不难了，最直接的办法就是在你的页面头部记得加上Doctype 。有关于DOCTYPE声明可以猛点这里查看 。下面我们就针对IE6的怪癖模式来解决这样的Bug 。
CSS Code

复制代码代码如下:
#container{
border: solid 1px #000;
background: #777;
width: 400px;
height: 160px;
margin: 30px 0 0 30px;
}
#element{
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 100px;
margin: 30px auto;
}

产生的效果如图所示

浏览器兼容之旅第三站:IE常见Bug总结及修复方法—part1



这主要是由于IE6的quirks模式不识别margin的auto属性值，但还好，解决这个bug并不复杂 。只需要在居中元素的父元素中加上text-align:center；然后在居中元素中加上text-align:left重新让元素文本左对齐

复制代码代码如下:
#container{
border: solid 1px #000;
background: #777;
width: 400px;
height: 160px;
margin: 30px 0 0 30px;
text-align: center;/*让子元素在IE6的quirks模式实现水平居中*/
}
#element{
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 100px;
margin: 30px auto;
text-align: left;/*重置文本对齐方式，让文本左对齐*/
}

当然元素居中问题是一个比较有意思的课题，如果你对这个感兴趣也可以阅读前面我整理的《CSS制作水平垂直居中对齐》一文，这样你对元素的居中会有更深的了解 。
五、列表li的楼梯Bug
li在IE6下呈楼梯状的效果，也可以算是IE6的一个经典Bug了吧 。他通常发生在li中放置了一些元素内容（比如说a）而且对其进行浮动，但li本身不浮动，此时在IE下就会有楼梯上了，具体先看下面的代码：
HTML Markup

复制代码代码如下:
ul
lia href="https://www.rkxy.com.cn/dnjc/#" _fcksavedurl=""#"" /a/li
lia href="https://www.rkxy.com.cn/dnjc/#" /a/li
lia href="https://www.rkxy.com.cn/dnjc/#" /a/li
/ul

CSS Code

复制代码代码如下:
ul {
list-style: none;
}
ul li a {

推荐阅读


上一篇：理论联系实际论述城市环境管理的基本原则

下一篇：微信群有管理员吗