इंटरनेट एक्सप्लोरर के लिए एक घंटा स्टाइलिंग

Question

अरे, मेरी खोज में जितनी संभव हो सके छवि प्रकाश के रूप में बनाने के लिए, मैं दो स्वर घंटा बनाने की तलाश में हूं।

मैं आधुनिक ब्राउज़रों में यह हासिल कर लिया है, लेकिन IE6 में एक ही प्रभाव और 7.

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

मैं कोशिश की है वर्तमान कोड मैं का उपयोग कर रहा है, कोई साथ हासिल करना चाहते हैं विशेष रूप से ब्राउज़र को लक्षित किए बिना इस काम को यानी 6 और 7 में बनाने के लिए सफलता। कोई विचार?

(यहाँ मेरे वर्तमान परियोजना है जहाँ मैं इस कोड को रोजगार कर रहा हूँ, और यह पार ब्राउज़र बनाने के लिए देख - http://www.qwibbledesigns.co.uk/preview/aurelius/)

चीयर्स

मैट

Answer 1

निम्नलिखित बजाय की तरह कुछ का प्रयास करें (और की जगह एक <div>)

div { 
    /* no need for border-left/right with the following: */ 
    border: none; 
    border-bottom:1px solid #FFFFFF; 
    border-top:1px solid #dcdcdc; 
    clear:both; 
    height:0; 
    width: 100%; 
} 

साथ <hr> (और भूल जाओ एक आईडी या वर्ग को जोड़ने के लिए नहीं है सभी divs को विषम दिखने से रोकने के लिए)

नोट: यह आई 7, आईई 8 और अनुपालन ब्राउज़र पर काम करता है। शायद 10 साल के आईई 6 के लिए अधिक tweaking की जरूरत है, या यहां तक ​​कि एक छवि हैक (अक्सर के रूप में) की जरूरत है।

Answer 2

मुझे लगता है कि सबसे आसान तरीका <div class="hr"></div> का उपयोग करना सबसे आसान तरीका है। स्टाइलिंग <hr/> क्रॉस-ब्राउजर मेरे अनुभव में हेड ब्रेकिंग है।

Answer 3

मैंने इस के लिए कोई अच्छा जवाब देखा है, लेकिन हालांकि मेरे स्वयं के काम को पता चला है कि निम्नलिखित कोड को एचआरआर स्टाइल करने के लिए फ़ायरफ़ॉक्स, सफारी, क्रोम और आईई में सुसंगत दिखने के लिए काम करना चाहिए (यह सुनिश्चित नहीं है कि यह आईई 7 के नीचे काम करता है)।

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*/ 
} 

Answer 4

आप कर रहे हैं ग्राहकों को पहले से ही < घंटे के साथ साइट पलस्तर है> टैग तुम सिर्फ शैली घंटा के साथ ही घंटे वर्ग तो < घंटा स्वैप कर सकते हैं> IE6 और IE7 में के लिए बाहर टैग करता है।

सीएसएस हाबिल द्वारा पोस्ट की का उपयोग करें:

hr, .hr { 
    /* no need for border-left/right with the following: */ 
    border: none; 
    border-bottom:1px solid #FFFFFF; 
    border-top:1px solid #dcdcdc; 
    clear:both; 
    height:0; 
    width: 100%; 
} 

फिर अपने js फ़ाइल में

बस डाल:

if ($.browser.msie && $.browser.version.substr(0, 1) <= 7) { 
    $("hr").replaceWith('<div class="hr"></div>'); 
} 

स्पष्ट रूप से jQuery यह सुधार के लिए आवश्यक है, लेकिन यह मेरे लिए अच्छी तरह से काम किया।

Answer 5

ऊंचाई 2px तक सेट करने से मेरे लिए समस्या हल हो गई।

hr { 
    margin: 1em 0 1em 0; 
    border: none; 
    border-top: 1px solid #000; 
    height: 2px; 
    display: block; 
} 

Answer 6

hr 
{ 
    /* hr css reset */ 
    color: white; /* if parent element's background is white - old ie versions fix */ 
    border: 0; 
    background: transparent; 
    height: 0; 
    margin: 0; 
    /* hr css reset end */ 
    /* custom styles */ 
    margin: 20px 0; 
    border-top: 1px solid red; 
}