About the compatibility of browsers in different versions of HR

Source: Internet
Author: User

HR tag, I believe everyone is familiar with it. We generally use it to produce a horizontal line effect. We can define "color", "height", "width", "border" and other styles for it.

Here we will only discuss the compatibility between "color" and "border" for different browsers.

Color:

Firefox, IE7 + =: specified by background-color.

IE6-=: specified by color.

Scheme: Specify the color for HR and use both background-color and color.

Border:

IE7 + =: If border: none is not specified, the browser adds a border with a certain width to HR by default.

IE6-=: the browser does not add borders to it by default.

Solution: Display declarative border: none.

Complete compatibilityCodeAs follows:

 1   <Style type = "text/CSS">  2   HR { 3  Border : None ; 4   Background-color : #060 ; 5   Color : #060 ; 6   Height : 2px ; 7   Width : 80% ;8 } 9   </Style> 
 1   <  Body  >  2       <  H1  >  3   Obama says Warren Buffett is right about taxes  4       </  H1  > 5       <  HR  />  6       <  P  >  7   Cannon Falls, Minnesota (Reuters)-small-town Americans probably don't make as much money as Warren Buffett, but they pay more of their income in taxes, president Barack Obama said on Monday, citing the billionaire investor to argue that the government needs more revenues to balance the budget.  8       </  P >  9   </  Body  > 

In addition, if you want to display dotted lines and other effects, you can do this:

 
1 HR {2 Height: 1px;3 Border: 0;4 Border-bottom: 1px dashed #000000;5}

 

 

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.