Web前端 hr标签的各种兼容问题

2018年学前端开发晚不晚 前端开发方案文档  百度前端开发论坛
<hr> 标签是在页面中创建一条水平分隔线(horizontal rule),在视觉上将文档分隔成上下两部分。而很多时候我们制作水平线都是通过css的border-top,或者border-bottom来实现的。这是因为<hr>在各个浏览器对的表现效果各不相同。
下面,我们就来了解<hr>在各个浏览器的一些兼容问题。注意:以下出现的主流浏览器是指IE8+、Chrome、火狐、Opera浏览器。
1、border:0 的表现效果
html: <hr />
css:hr {
width: 80%;
border: 0;
}以上代码从字面上理解本应该是宽度为80%,边框为零即不可见。而实际上所有浏览器中<hr>的宽度为80%,主流浏览器不显示任何内容,而在IE6、7浏览器却显示一条2px的灰色水平线;
2、设置<hr>的颜色
在IE6、7浏览器中,设置<hr>颜色用 color;而在Chrome、火狐、Opera浏览器中用 background-color 。
html: <hr />css: hr {
width: 80%;
border: 0;
color: #f00;
background-color: #000;
height: 5px;
}以上代码在主流浏览器的颜色为黑色,在IE6、7浏览器中是红色;
3、margin-top、margin-bottom的表现效果
在IE6、7浏览器中,<hr>的margin-top、margin-bottom会额外增加7px。
HTML: <div class=”section-01″></div>
<hr />
<div class=”section-02″></div>
css
.section-01, .section-02{
width:80%;
margin:0 auto;
height:10px;
overflow:hidden;
background-color:#ccc;
}
hr {
border: 0;
width: 80%;
margin-top: 20px;
margin-bottom: 20px;
color: #f00;
background-color: #f00;
height: 1px;
}以上代码在主流浏览器中的上下边距是20px,而在IE6、7浏览器是27px;
因此,为了达到所有浏览器的效果一样,我们需要写兼容IE6、7的上下边距样式,其上下边距为主流浏览器数值减去7。如上面代码上下边距为20px,则IE6、7浏览器的就为13px,对应的兼容样式写法是: margin-top: 13px; margin-bottom: 13px; 。
4、background-image的表现效果
HTML: <hr />
css
hr {
border: 0;
width: 80%;
height: 15px;
color: transparent;
background: #fff url(http://www.sovavsiti.cz/css/hr1.gif) no-repeat scroll center;
}以上代码在主流浏览器正常显示背景图、没有边框、宽度为80%。但在IE6、7浏览器中在背景图四周会有边框,并且这个边框是没办法用样式隐藏起来,具体效果如以下两图所示:
上图:IE8+、Chrome、火狐、Opera浏览器
上图:IE6、7 浏览器
但是我们能够在<hr>外层嵌套一个div,然后通过给div设置原来<hr>的样式,并且把<hr>隐藏起来。
HTML: <div class=”hr”>
<hr />
</div>
css
div.hr {
height: 15px;
background: #fff url(http://www.sovavsiti.cz/css/hr1.gif) no-repeat scroll center;
}
div.hr hr {
display: none;
}以上代码就能够在所有浏览器中得到一样的表现效果,如下图所示:
##总结<hr> 标签各浏览器中存在的兼容问题如下:
border: 0 —主流浏览器没有显示内容;IE6、7浏览器却显示一条2px的灰色横线
颜色 — 主流浏览器用 background-color;IE6、7浏览器 color
边距 — 主流浏览器上下边距正常;IE6、7浏览器比正常额外多出7px
background-image —主流浏览器正常显示,但IE6、7浏览器在背景图四周会出现边框
2018 前端开发饱和了吗 前端开发we文档 前端开发 百度百科
» 本文来自:前端开发者 » 《Web前端 hr标签的各种兼容问题》
» 本文链接地址:https://www.rokub.com/5324.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!