您的位置:知识库 » Web前端

9个最常见IE的Bug及其解决方案(上)

作者: hotdog  来源: techweb  发布时间: 2009-11-19 16:58  阅读: 2261 次  推荐: 1   原文链接   [收藏]  

  Internet Explorer – Web程序员的毒药。在IE上开发时间中有超过60%的时间是花在和IE的bug进行搏斗,让你的开发生产率严重下降。下面是一个教程,告诉你9个IE上最常见的BUG以及如何解决它们。

  1. 居中布局创建一个CSS定义把一个元素放到中间的位置,可能是每一个Web开发人员都会做的事情。最简单的做法是为你的元素增加一个margin: auto; ,然而 IE 6.0 会出现很多奇怪的行为。让我们来看一个例子。

#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却给我们这样的输出:

  这应该是IE 6对margin的 auto 并没有正确的设置。但幸运的是,这是很容易被修正的。

  解决方法

  最简单的方法是在父元件中使用 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;
}
#element
{
background
: #95CFEF;
border
: solid 1px #36F;
width
: 300px;
height
: 100px;
margin
: 30px auto;
text-align
: left;
}

  2. 楼梯式的效果几乎所有的Web开发者都会使用list来创建导航条。下面是你可能会用到的代码:

<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
ul 
{
list-style
: none;
}
ul li a
{
display
: block;
width
: 130px;
height
: 30px;
text-align
: center;
color
: #fff;
background
: #95CFEF;
border
: solid 1px #36F;
margin
: 30px 5px;
}

  一个符合标准的浏览器会是下面这样:

  但IE却是这样的:

  下面是两个解决方法

  解决方法一

  设置li元件的float属性。

ul li
{
float
:left;
}

  解决方法二

  设置 display: inline 属性。

ul li
{
display
: inline;
}

  3. float元件的两倍空白请看下面的代码:

element{
background
: #95CFEF;
width
: 300px;
height
: 100px;
float
: left;
margin
: 30px 0 0 30px;
border
: solid 1px #36F;
}

  期望的结果是:

  IE的结果是:

  解决方案

  和上面那个BUG的解决方案一样,设置 display: inline 属性可以解决问题。

element{
background
: #95CFEF;
width
: 300px;
height
: 100px;
float
: left;
margin
: 30px 0 0 30px;
border
: solid 1px #36F;
display
: inline;
}

  4. 无法设置微型高度我们发现在IE中使用 height: XXpx 这样的属性无法设置比较小的高度。下面是个例子(注意高度是2px):

element{
background
: #95CFEF;
width
: 300px;
height
: 2px;
border
: solid 1px #36F;
margin
: 30px 0;
}

  期望结果: 2px的元件加1px的边框。

  IE的结果:

  解决方案一

  这个BUG的产生原因很简单,IE不允许元件的高度小于字体的高度,所以,下面的fix是设置上字体大小。

element{
background
: #95CFEF;
width
: 300px;
height
: 2px;
border
: solid 1px #36F;
margin
: 30px 0;
font-size
:0px;
}

  解决方案二

  但是最佳的解决方法是使用 overflow: hidden 。

element{
background
: #95CFEF;
width
: 300px;
height
: 2px;
border
: solid 1px #36F;
margin
: 30px 0;
overflow
:hidden;
}

未完待续

1
0
标签:css ie hack

Web前端热门文章

    Web前端最新文章

      最新新闻

        热门新闻