0

私はプロジェクトに取り組んでおり、IE7+ に準拠する必要があります。非常にうまく機能するスタイルがいくつかありますが、IE7 では小さな問題があり、最後のバグはラベルに関するものです。幅は 150px に強制され、ラベルが大きい場合は次の行に続きます。ただし、IE7 では、次のブロックでオーバーライドされます。ここに画像があります：

IE7 のバグ

私が欲しいもの（そしてそれはIE8 +と実際のナビゲーターの結果です）：

欲しかった結果

問題のある CSS を抽出し、ブートストラップを作成しました。

<!-- DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" -->
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <style type="text/css">
.form_text {
    position:relative;
    clear:both;
    margin:.2em;
    padding-left:150px;
}
.form_text label {
    position:relative;
    *position:absolute;
    float:left;
    width:140px;
    margin:.2em 0 0 -150px;
    text-align:right;
}
    </style>
</head>
<body>
    <p class="form_text">
        <label>My label too long to stay on one line</label><input type="text" />
    </p>
    <p class="form_text">
        <label>A normal label</label> <input type="text" />
    </p>
</body>
</html>

CSS を切断することで、問題が に起因することがわかりましたが*position:absolute;、それを削除しても機能しません :

位置アブソなし

最後に、 も削除できないことはわかってmargin:.2em;いますが、マージンが大きすぎます。

それで、これを修正する方法はありますか？

できれば、既存の CSS (デモにあるもの) を変更しない方法が欲しいです。しかし、私は好きなだけ追加できます。

編集

可能であれば、長すぎるラベルにクラスを追加しないような解決策が欲しいです。

4

2 に答える 2

0

OP では、CSS に関して何ができるか、何ができないかは明確ではありませんが、次のようにします。

.form_text label { 
    line-height: 0.8; 
}

および/または

.form_text { 
    height: 30px; 
}

お役に立てれば。

于 2013-09-04T10:37:34.857 に答える
0

私は解決策を見つけましたが、実際には完璧ではありませんが、必要な結果が得られます。

まず、ブロッキング CSS 属性をリセットします。

.form_text label {
    *position:relative;
}

次に、IE が 2 番目のラベルを移動するのを避けるために、空の div を追加してクリアを許可しました (JQuery に感謝):

$('.form_text').after('<div style="clear:both;font-size:0;height:1px"/>');

JSが必要なため、このソリューションはあまり好きではあり:afterませんが、IE7では機能せず、それを置き換えるためのすべてのcss修正により、ブラウザがページでハングアップしました...

-- この質問の回答に基づくアイデア: IE7 float right problems

于 2013-09-06T13:00:38.157 に答える