CSS bir div içinde duracak bir stil oluşturmak (Chrome davranışı)

Question

Ticari bir web sitesi oluşturma aşamasındayım ama takılıyorum.

Yukarıdaki bağlantıyı tıklarsanız, logoyu ve metni bölmek için kullandığım bir degrade grafiği görmelisiniz. Şimdi bunu Google Chrome'un en son sürümünde açarsanız, logonun sağ tarafında düzgün görüntülenmediğini görmelisiniz.

Benim HTML yapısı:

<div class="header"> 
    <a href="/?lang=en"> 
     <div class="logo"> 
      <div class="logo-container"> 
       <img src="/assets/imagesets/logos.gif" alt="Winslow Logo" height="100" width="138" /> 
       <div class="side-border"></div> 
      </div> 
      <div class="text-container"> 
       <h1 class="tag">Winslow Hotels</h1> 
      </div> 
     </div> 
    </a> 
    <!-- ... --> 
</div> 

CSS:

div.header 
{ 
    max-width: 800px; 
    height: 100px; 
    margin: 1% auto; 
    margin-bottom: 10%; 
    border-radius: 15px 15px 15px 0px; 
    background-color: #FFFFFF; 
} 

div.logo 
{ 
    display: block; 
    width: 800px; 
    height: 100px; 
} 

div.logo-container 
{ 
    width: 140px; 
    height: 100px; 
    float: left; 
    display: inline-block; 
} 

div.side-border 
{ 
    width: 2px; 
    height: 100px; 
    float: right; 
    display: inline-block; 
    background-image: url("/assets/imagesets/side-border.png"); 
} 

div.text-container 
{ 
    display: inline-block; 
    width: 660px; 
    float: right; 
    height: 100px; 
    font-family: Arial; 
    font-size: 5em; 
    padding: 1.5%; 
} 

div.menu-container 
{ 
    display: block; 
    width: 250px; 
    position: fixed; 
    top: 8%; 
    left: 0px; 
} 

Bu kod Google Chrome dışında diğer her tarayıcıda çalışır. Chrome'da bir hata mı yoksa düzeltmek için CSS'ye hack eklemek zorunda mıyım?

Düzenleme:

div.side-borderdiv.text-container yanında konumlandırılmış değildir ve div.logo-container içinde görünmüyor.

Answer 1

Genişlik ve şamandıralarla ilgili bir sorun olarak görünüyor. Ben, kullanmak olduğunu size tavsiye ne Ancak değinilmeyecek gereksiz kod, bir sürü var bir pseudo-selector (:after) yerine ayrı div (.side-border) nasıl sonucu elde etmek için:

.logo-container { 
    position:relative; 
} 

.logo-container:after { 
    width: 2px; 
    height: 100px; 
    display: block; 
    background-image: url("/assets/imagesets/side-border.png"); 
    content: ''; 
    position: absolute; 
    right: 0; top: 0; 
} 

Ve .side-border kaldırmak HTML ve CSS'den.

---

Düzenleme: ikinci düşünce üzerine, bu daha da basitleştirilmiş olabilir. *** Söz konusu

div.logo-container { 
    width: 140px; 
    height: 100px; 
    float: left; 
    display: inline-block; 
    background: url("/assets/imagesets/side-border.png") no-repeat right; 
}