Home  >  Article  >  Web Front-end  >  Description of the problem of hr tag in various browsers_HTML/Xhtml_Web page production

Description of the problem of hr tag in various browsers_HTML/Xhtml_Web page production

WBOY
WBOYOriginal
2016-05-16 16:41:161329browse

Generally, we rarely see HR, but once we see one, it can mean the difference between life and death. The same is true in HTML. We don't often see


, but the sight of it usually determines whether we can use the perfect dividing line. Here, I won’t attach pictures, just list them for reference:

  正常浏览器 IE6、7 Firefox
实际高度 height border-right-width border-left-width height height
背景色 background-color background color(当高度<2px时,显示高度为灰色投影,需要color来设置颜色,相同于文字) background-color

For example, if you want to create a dividing line with an actual height of 3px, four sides of 1px, a border color of #07f, and a color of other parts of #f60, you know:

Copy code
The code is as follows:

hr{
height:1px;
*height:3px; color:#f60;/ * for ie6 ie7 */;
background-color:#f60;
border:1px solid #07f;
}
@-moz-document url-prefix(){ hr{height:3px ;}} /* for firefox */

Is there any other more labor-saving solution?
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn