加入收藏 | 设为首页 | 会员中心 | 我要投稿 河北网 (https://www.hebeiwang.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 运营 > 正文

IE赏识器9个最常见Bug及其批改要领

发布时间:2018-10-02 04:02:41 所属栏目:运营 来源:站长网
导读:Internet Explorer Web措施员的毒药。在IE上开拓时刻中有高出60%的时刻是花在和IE的bug举办屠杀,让你的开拓出产率严峻降落。下面是一个教程,汇报你9个IE上最常见的BUG以及怎样办理它们。 1. 居中机关 建设一个CSS界说把一个元素放到中间的位置,也许是每

Internet Explorer – Web措施员的毒药。在IE上开拓时刻中有高出60%的时刻是花在和IE的bug举办屠杀,让你的开拓出产率严峻降落。下面是一个教程,汇报你9个IE上最常见的BUG以及怎样办理它们。

1. 居中机关

建设一个CSS界说把一个元素放到中间的位置,也许是每一个Web开拓职员城市做的工作。最简朴的做法是为你的元素增进一个margin: auto; ,然而 IE 6.0 会呈现许多稀疏的举动。让我们来看一个例子。

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com] #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
}

下面是我们所祈望的输出:

Tutorial Image

但IE却给我们这样的输出:

Tutorial Image

这应该是IE 6对margin的 auto 并没有正确的配置。但荣幸的是,这是很轻易被批改的。

办理要领

最简朴的要领是在父元件中行使 text-align: center 属性,而在元件中行使 text-align: left

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com] #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来建设导航条。下面是你也许会用到的代码:

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com] <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
float: left
background: #95CFEF
border: solid 1px #36F
margin: 30px 5px
}

一个切合尺度的赏识器会是下面这样:

Tutorial Image

但IE却是这样的:

Tutorial Image

下面是两个办理要领

办理要领一

配置li元件的float属性。

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com] ul li {
float: left
}

办理要领二

配置 display: inline 属性。

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com] ul li {
display: inline
}

(编辑:河北网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读