div内でdivをスタイリングする（Chromeの動作）

Question

私は商用のウェブサイトを作成中ですが、私は立ち往生しています。

上記のリンクをクリックすると、ロゴとテキストを分割するために使用するグラデーショングラフィックが表示されます。これをGoogle Chromeの最新バージョンで開くと、ロゴの右側に正しく表示されていないことがわかります。

私のHTML構造：

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

このコードは Google Chromeのを除いて、他のすべてのブラウザで動作します。 Chromeのバグですか？また、修正するためにCSSにハックを追加する必要がありますか？

編集：

div.side-borderは次div.text-containerに配置されていないとdiv.logo-container以内に表示されません。

Answer 1

幅と浮動小数点に問題があるようです。そこ私は対処しません不要なコードの多くは、ですが、私はあなたにお勧めするものである、あなたの結果を達成する代わりに、別のdiv（.side-border）のpseudo-selector（:after）を使用します。

.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; 
} 

そして.side-borderを削除しますHTMLとCSSから。

---

編集：考え直しに、これは、より簡単にすることができます。ただ、.logo-containerにbackgroundとしてグラデーションボーダー画像を追加して、右にそれを置く：

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