CSS Sözde öğeleri: önce &: Internet Explorer'da farklı çalıştıktan sonra

Question

Görüntü veya javascript olmadan yalnızca CSS kullanarak açıları olan bir gezinme oluşturmaya çalıştığım için çok özel bir sorun var. Mükemmel şekilde çalışabilmem için anladım ama karşılaştığım problem IE 9 ve Chrome'un farklı görünmesi. Her ikisini de sahte elemanların kenar boşluklarını değiştirerek çalışabilirim ama her ikisinde de çalışmak için tek bir çözüm tercih ederim. Herkes marjların neden farklı olduğunu anlayabilir ve her iki tarayıcıda da çalışacak tek bir CSS çözümü verirse harika olur. Aksi halde, IE için ayrı bir sınıf eklemek ve ayrı bir CSS girişi kullanarak çalışmaya zorlamak zorunda kalacağım. İşte

İşte arrow-nav

ile çalışmak için HTML

<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> 

CSS jsfiddle olduğu

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

Sen sözde elemanlarında mutlak konumlandırma kullanarak bu sorunu giderebilirsiniz. Bunu doğru şekilde yapmak için ul li konumunu göreceli olarak ayarlayın (bu, kesinlikle içinde bulunan öğelerin li'ye göre olmasına neden olacaktır). Ardından, left yerine margin-left kullanmak sözde elemanlarının konumunu güncellemek:

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

Örneğin top için elementlerin (pozisyonunu belirlemek gerekir ve left değerleri). Ve ben tam anlamıyorum Bazı sebeplerden dolayı, - li (değil ul) için position: relative eklemek için:

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