快捷搜索:  as  test  1111  test aNd 8=8  test++aNd+8=8  as++aNd+8=8  as aNd 8=8

万博体育电脑官网登录_酒文化网进入



我们在浏览网页的时刻常常望见这样的征象:某个网页在IE6浏览器中打开很正常,然则在IE8里面打开可能完全变形万博体育电脑官网登录了。或者也有可能呈现完全相反的征象。这让Web法度榜样员及设计师每每为了其CSS在各个IE版本下体现怪异而苦楚不已,无意偶尔候必要经由万博体育电脑官网登录过程专为IE6或者IE8设计零丁的定义。IE浏览器则是以被公觉得Web法度榜样员的毒药,虽然在微软官网上并没有供给相关的办理规划,然则IE浏览器的兼容性存在的问题却是Web法度榜样员必须纯熟掌握的。本文总结了9个IE浏览器上最常见的Bug,以及它们的办理规划。

在IE上开拓光阴中有跨越60%的光阴是花在和IE的bug进行肉搏,让你的开拓临盆率严重下降。通俗的用户可能不会在意网站的开拓职员是不是想尽了法子让自己的网站在他们浏览时所应用的浏览器下能够兼容并且足够稳定和方便应用。但作为一个优秀的Web法度榜样员是不得不有效办理的一个紧张问题。下面为广大年夜的网页开拓者供给了一个教程,奉告你在IE上9个最常见的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 0;

text-align: left;

}

2. 楼梯式的效果

险些所有的Web开拓者都邑应用list来创建导航条。下面是你可能会用到的代码:

ul>

li>a h万博体育电脑官网登录ref="#">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;

float: left;

background: #95CFEF;

border: solid 1px #36F;

margin: 30px 5px;

}

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

但IE却是这样的:

下面是两个办理措施

办理措施一

设置li元件的float属性。

ul li { float: left; }

办理措施二

设置 dis万博体育电脑官网登录play: 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;

border: solid 1px #36F;

width: 300px;

height: 2px;

margin: 30px 0;

}

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

IE的结果:

办理规整洁

这个BUG的孕育发生缘故原由很简单,IE不容许元件的高度小于字体的高度,以是,下面的fix是设置上字体大年夜小。

#element{

background: #95CFEF;

border: solid 1px #36F;

width: 300px;

height: 2px;

margin: 30px 0;

font-size: 0;

}

办理规划二

然则最佳的办理措施是应用 overflow: hidden 。

#element{

background: #95CFEF;

border: solid 1px #36F;

width: 300px;

height: 2px;

margin: 30px 0;

overflow: hidden

}

5. 跨出界限

这个BUG是很丢脸的。当父元件中应用了 overflow 的 auto 属性,并且在其里放入相关元件。你会看来里面的元件会跨出来。下面是一个示例:

div id="element">div id="anotherelement">div>div>

#element{

background: #95CFEF;

border: solid 1px #36F;

width: 300px;

height: 150px;

margin: 30px 0;

overflow: auto;

}

#anotherelement{

background: #555;

width: 150px;

height: 175px;

position: relative;

margin: 30px;

}

期望的结果:

IE的结果:

办理措施

设置 position: relative;属性

#element{

background: #95CFEF;

border: solid 1px #36F;

width: 300px;

height: 150px;

margin: 30px 0;

overflow: auto;

position: relative;

}

6. Fixing the Broken Box Model

Internet Explorer曲解了“盒子模子”可能是最弗成包容的工作了。IE 6 这个半标准的浏览器逃避了这个工作,但这个问题照样会由于IE运行在“怪异模式”下呈现。

两个Div元件。一个是有fix的,一个是没有的。而他们不合的高和宽加上padding的总合却是不一样的。下图的上方是被修正的,下方则没有。

办理措施

我信托这个工作即不必要解释也不必要演示,这应该是大年夜多半人都明白的。下面是一个很相称怪异的办理规划

#element{

width: 400px;

height: 150px;

padding: 50px;

}

上面的定义也便是说:

#element {

width: 400px;

height: 150px;

\height: 250px;

\width: 500px

}

是的,你要原本的长和宽上加上了padding。但这个fix只会感化于IE了的“怪异模式”,以是你不必要担心在IE6的正常模式下会有问题。

7. 设置min-height和min-width

IE轻忽了min-height。

办理措施一

这个fix由 Dustin Diaz供给。其使用了 !important 下面是代码片段:

#element {

min-height:150px;

height:auto !important;

height:150px;

}

办理措施二

#element {

min-height: 150px;

height: 150px;

}

html>body #element {

height: auto;

}

8. Float 结构差错行径 Misbehaving

应用无table的结构最紧张的便是应用CSS的float元件。在很多环境下,IE6处置惩罚起来似乎在摸索阶段,有些时刻,你会发明很多稀罕的行径。比如在此中有一些文本的时刻。

来看一下下面这个示例:

div id="container">

div id="element">http://net.tutsplus.com/div>

div id="anotherelement">div>

div>

#element, #anotherelement{

background: #95CFEF;

border: solid 1px #36F;

width: 100px;

height: 150px;

margin: 30px;

padding: 10px;

float: left;

}

#container{

background: #C2DFEF;

border: solid 1px #36F;

width: 365px;

margin: 30px;

padding: 5px;

overflow: auto;

}

期望结果:

IE的结果:

你可以看到此中的不合了

办理措施

要办理这个问题没有什么好的措施。只有一个措施,那便是应用 overflow: hidden 。

#element{

background: #C2DFEF;

border: solid 1px #36F;

width: 365px;

margin: 30px;

padding: 5px;

overflow: hidden;

}

9. 在list项目门的空行

先看下面的例子

ul>

li>a href="#">Link 1a>li>

li>a href="#">Link 2a>li>

li>a href="#">Link 3a>li>

ul>

ul {

margin:0;

padding:0;

list-style:none;

}

li a {

background: #95CFEF;

display: block;

}

期望结果:

IE的结果:

还好,你可以用下面的措施来办理

办理措施一

定义height来办理

li a {

background: #95CFEF;

display: block;

height: 200px;

}

办理措施二

li a {

background: #95CFEF;

float: left;

clear: left;

}

办理措施三

为 li 加上display: inline。

li {

display: inline;

}

结论

调界面是一件很难的事,调一个CSS的HTML界面是一件更难的事,在IE下调一个CSS的HTML界面是难上加难的事。

如今正还有很多用户在应用IE6浏览器,而IE6并晦气于网站设计的兼容性,而网站开拓工程师们不停致力于让他们的网站能够兼容于IE6下的浏览。万博体育电脑官网登录这也为他们带来很多的不需要的包袱,我们盼望之前仍旧在应用IE6的用户能够把IE浏览器进级到最新IE8,以便你能够体验更开心的网上冲浪,同时(盼望)能够经由过程这些用户此举(进级他们已颠末时的浏览器)来缓和不停以来收集开拓工程师们面临的首要繁杂的场所场面。

转自:http://www.iefans.net/ie-9-css-bug/

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

您可能还会对下面的文章感兴趣: