0

IE7で動作するWebページを作成しています。ふきだしのスパン（数行の長さ）を垂直方向に中央に配置したいと思います。最近のブラウザline-heightでは、スパンの親のプロパティをスパンの親自体の高さに設定することでこれを実現しました。次に、スパンにプロパティが与えられdisplay、inline-blockそのline-heightプロパティはそのフォントサイズに対応するものに設定され、そのvertical-alignプロパティは次のように設定されます。middle。ただし、IE7で表示しようとすると、スパンのテキストの行の高さはスパンの行の高さではなく、スパンの親の行の高さであるように見えます。これは、スパンにインラインブロック表示プロパティがないかのようです。これは、インラインの場合に予想されるものです。span要素はデフォルトでインラインであるため、inline-blockプロパティはIE7で機能することが期待されますが、機能しません。私はcss-tricksによって提案されzoom: 1;た「クロスブラウザインラインブロック」のようなものを適用しようとしましたが、これはどれも機能しません。私はテーブルの使用を真剣に検討していますが、それは私が頼りにしたいものではありません。

この問題はhttp://jsfiddle.net/sAuhsoj/bWdwE/で確認できます（ browserlab.adobeを使用してフルスクリーンバージョンhttp://jsfiddle.net/sAuhsoj/bWdwE/embedded/result/を表示することをお勧めします。 .comでIE7でどのように表示されるかを確認してください）

4

2 に答える 2

2

CSSハックでIE7をターゲットにするには、次の表示ルールを追加できます。

*display : block;

そのように記述された*プロパティは、IE7以下でのみ処理されます。

タグに条件付きコメント<html>を使用することをお勧めしますか？個人的に、私は使用します：

<!--[if lt IE 8]>  <html class="ie ielt8 ielt9"> <![endif]-->
<!--[if IE 8]>  <html class="ie ie8 ielt9"> <![endif]-->
<!--[if IE 9]>  <html class="ie ie9"> <![endif]-->
<!--[if gt IE 9]> <html class="ie10"> <![endif]-->
<!--[if !IE]>--> <html> <![endif]-->

次に、この方法で任意のIEブラウザをターゲットにできます。

.ielt8 .anyClass {
    /* any rule here will effect ie7-6 only */
}
.ie8 .anyClass {
    /* any rule here will effect ie8 only */
}
.ielt9 .anyClass {
    /* any rule here will effect ie6-7-8 only */
}
.ie9 .anyClass {
    /* any rule here will effect ie9 only */
}
.ie10 .anyClass {
    /* ie10, for future reference */
}
.ie .anyClass {
    /* any ie but 10 */
}

これは本当に簡単で、ハックを使用する必要はありません。これは検証に適していて、将来起こりうる干渉を排除します。

あなたの場合、IE7に次のようなまったく新しいスタイルを設定できます。

.userQuote .quoteText {
    display: block;
    line-height: a pixel value;
 }
于 2012-09-19T16:46:08.363 に答える
1

この特定の場合の問題はrem、行の高さ属性での単位の使用です。

に変更remするだけemで、IEの問題が解決します。

http://jsfiddle.net/bWdwE/2/

于 2012-09-19T20:36:56.647 に答える