Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
452 views
in Technique[技术] by (71.8m points)

html - Styling a hr for internet explorer

Hey, in my quest to create as image light a site as possible, I'm looking to create two tone hr's.

I've achieved this in modern browsers, but want to achieve the same effect in ie6 and 7.

The current code I am using is

hr {
    border-bottom:1px solid #FFFFFF; 
    border-top:1px solid #dcdcdc; 
    clear:both; 
    height:0; 
    border-left:0px; 
    border-right:0px;
}

I've tried, with no success to make this work in ie6 and 7 without having to target the browsers specifically. Any thoughts?

(Heres my current project where I am employing this code, and looking to make it cross browser - http://www.qwibbledesigns.co.uk/preview/aurelius/ )

Cheers

Matt

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

I havent seen any good answer for this but though my own work figured out the following code should work for styling a HR to look consistent in firefox, safari, chrome and IE (not sure if it works below IE7).

hr {
    color:#bfbfbf; /*used for IE, top color*/
    background:#bfbfbf; /*firefox and chrome, top color*/
    min-height: 0px;  /*required to get IE to render the top pixel color*/
    border-left: 0px; 
    border-right: 0px; 
    border-top: 1px solid #bfbfbf; /*Your top color*/
    border-bottom: 1px solid #ffffff; /*Your bottom color*/
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...