सीएसएस छद्म-तत्व: पहले और: इंटरनेट एक्सप्लोरर

Question

में अलग-अलग काम करने के बाद मुझे एक बहुत ही विशिष्ट समस्या है क्योंकि मैं एक नेविगेशन बनाने की कोशिश कर रहा हूं जिसमें छवियों या जावास्क्रिप्ट के बिना पूरी तरह से सीएसएस का उपयोग कर कोण हैं। मैंने इसे समझ लिया है ताकि यह पूरी तरह से काम कर सके लेकिन जिस समस्या में मैं आ रहा हूं वह यह है कि आईई 9 और क्रोम अलग दिखते हैं। मैं छद्म तत्वों के मार्जिन को बदलकर काम करने के लिए दोनों मिल सकता हूं लेकिन मैं दोनों में काम करने के लिए एक ही समाधान पसंद करूंगा। अगर कोई यह समझ सकता है कि मार्जिन अलग क्यों हैं और मुझे दोनों ब्राउज़रों में काम करने के लिए एक सीएसएस समाधान दें जो बहुत अच्छा होगा। अन्यथा मुझे आईई के लिए एक अलग वर्ग जोड़ना होगा और इसे एक अलग सीएसएस प्रविष्टि का उपयोग करके काम करने के लिए मजबूर करना होगा।

यहाँ arrow-nav

यहाँ के साथ काम करने जाता है एचटीएमएल

<ul> 
    <li><a href="#" >Some Navigation</a></li> 
    <li><a href="#">More navigation</a></li> 
    <li><a href="#">Another Nav</a></li> 
    <li><a href="#">Test Nav</a></li> 
    <li><a href="#">A Test Navigation</a></li> 
</ul> 

सीएसएस jsfiddle है

ul { 
    float:right; 
    list-style-type:none; 
    margin:0; 
    padding:0; 
    width: 300px; 
} 
ul li a { 
    float:left; 
    width:300px; 
} 
ul li{ 
    float:left; 
    width: 300px; 
    height:50px; 
    line-height:50px; 
    text-indent:10%; 
    background: grey; 
    margin-bottom:10px; 
    border:1px solid black; 
} 
ul li:before { 
    content:""; 
    position:absolute; 
    margin-top:-1px; 
    border-top: 26px solid transparent; 
    border-bottom: 26px solid transparent; 
    border-right: 21px solid black; 
    margin-left:-22px; 
} 
ul li:after { 
    content:""; 
    position:absolute; 
    border-top: 25px solid transparent; 
    border-bottom: 25px solid transparent; 
    border-right: 20px solid grey; 
    margin-left:-320px; 
} 

Answer 1

आप छद्म तत्वों पर पूर्ण स्थिति का उपयोग करके इसे ठीक कर सकते हैं। इस काम को सही तरीके से करने के लिए, ul li की स्थिति को सापेक्ष में सेट करें (जो ली के सापेक्ष होने के लिए तत्वों को बिल्कुल भीतर रखेगा)। फिर, left बजाय margin-left उपयोग करने के लिए छद्म तत्वों की स्थिति को अद्यतन:

ul li{ 
    position: relative; // Add this. 
    float:left; 
    width: 300px; 
    height:50px; 
    line-height:50px; 
    text-indent:10%; 
    background: grey; 
    margin-bottom:10px; 
    border:1px solid black; 
} 
ul li:before { 
    content:""; 
    position:absolute; 
    margin-top:-1px; 
    border-top: 26px solid transparent; 
    border-bottom: 26px solid transparent; 
    border-right: 21px solid black; 
    left:-22px; // Update from margin-left to left 
} 
ul li:after { 
    content:""; 
    position:absolute; 
    border-top: 25px solid transparent; 
    border-bottom: 25px solid transparent; 
    border-right: 20px solid grey; 
    left:-20px; // Update from margin-left to left 
} 

http://jsfiddle.net/ryanbrill/jSdWR/5/

Answer 2

आप तत्वों (उदाहरण के top के लिए के लिए स्थिति निर्दिष्ट करने की आवश्यकता है और left मूल्य)। और किसी कारण है, जो मैं पूरी तरह से समझ में नहीं आता के लिए - li (नहीं ul) को position: relative जोड़ने के लिए:

http://jsfiddle.net/jSdWR/4/