Perfect hr-compatible with every browser firefox,ie6,ie7

Source: Internet
Author: User
The Perfect browser-compatible HR

height:1px;
Border:none;
border-top:1px solid Black;
margin:0;
*margin:0 0-14px 0;
Float:none;
*float:left;
Display:block;


The 1.hr element is a block-level element that is a box that has border

2. Height: sizeAnd Style.height.

IE
And FirefoxThe size is interpreted and calculated differently, so it's best not to sizeUse Height, but there will be a border Box, so will Border:none.

FirefoxIt's under. sizeIt's solid. Box, not just an ordinary block-level element.


3. Color: ColorAnd Style.border-color

Height
If not greater than 2pxThe difference between these two attributes is not visible.

Firefox: Color=border-color, when the height is greater than 2, there will be a The Hollow Box

IE: Yes Border-colorNot recognized, to use border:1px Solid Black;

4. Margin

HR in no default margins under Firefox(It can be eliminated even if it is useful margin:0)

HR has default top margin 14px and bottom margin 14px (even margin:0) under IE, use float to eliminate margin-top (please use *float, or use width and then float.)

Then in the use of CSS hack to the IE set a margin-bottom:-14px, so that the following elements will move up 14px, as if the HR below the margin to eliminate a bit.

Ps:hr in Firefox is incredibly rounded, and if you set the HR height and width of the same value, you can get a circle (solid or hollow) Oh.


In fact, the HR as a div is also used, but also a different browser parsing has a very big difference in the strange div, so using HR is not as direct as the border of Div.



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.