0

私はこの問題を抱えています: http://liberainformazione.it/

ここに画像の説明を入力

タイトル CSS ルール:

p.right_sidebar_title {
font-size: 16px!important;
font-weight: bold;
color: black;
margin: 7px 0!important;
line-height: 18px!important;
font-family: Arial,Helvetica,sans-serif;
font-weight: bold;
width: 300px;
}

青い四角形の CSS ルール:

.post-category-rightSidebar {
background: #369;
display: inline;
float: left;
font-size: 10px;
height: 16px;
line-height: 17px;
margin-right: 5px;
padding: 0 5px;
text-transform: uppercase;
color: white;
}

Chrome や Firefox では青い四角形はタイトルの近くにありますが、IE ではタイトルは新しい行にあります..... IE が私の CSS ルールを認識しない理由がわかりません。

私が間違っていることは何ですか？どうもありがとう。

4

2 に答える 2

1

あなたのページには が<meta http-equiv="X-UA-Compatible" content="IE=7" />あるので、IE9 は IE7 として動作しています。

IE7 では、widthまたは ( height) 値を指定すると、いわゆるhasLayout要素のボックスが分離され、その内容が外部要素によってフローティングされるのを防ぎます。

X-UA-Compatibleメタ要素を値に設定する (最良のオプション) か、ルールからIE=edge削除するか、要素とフローティング カラー スクエアの両方を含むコンテナーに対してこの幅を指定する必要があります。width: 300px;p.right_sidebar_title p.right_sidebar_title

于 2013-01-02T17:50:13.697 に答える
0

にフロートがないことに気付きました。それp.right_sidebar_titleに追加float: left;してみてください。

それが役立つ場合は、独自の div を配置して内部にp.right_sidebar_title配置します。.post-category-rightSidebar

<div>
    <div class="post-category-rightSidebar"></div>
    <p class="right_sidebar_title">Title</p>
</div>

お役に立てれば！

于 2013-01-02T17:11:12.400 に答える