私は商用のウェブサイトを作成中ですが、私は立ち往生しています。div内でdivをスタイリングする(Chromeの動作)
上記のリンクをクリックすると、ロゴとテキストを分割するために使用するグラデーショングラフィックが表示されます。これを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
以内に表示されません。
あなたが必要とする正確に何をハイライトするために***質問に***あなたの特定の問題を明確化または追加の詳細情報を追加してください。現在書かれているとおり、あなたが求めていることを正確に伝えるのは難しいです。何が間違っているかを推測するために別のページを表示する必要はありません。 –
Ok質問を編集しました –