0

メディアクエリに次の CSS があります (最小幅 768px の場合):

.formHolder-section {width: 235px; position: relative; float: left; margin:0;}
.formHolder-section:first-child { margin: 0 20px 0 40px; }

オーバーライド (:first-child 用) は、IE7 を除くすべてのブラウザーで機能します。これに正当な理由があるかどうか疑問に思っています...マージン値を逆にしてみました((2) .formHolder-section divすべてに適用してから、別のセレクターを使用します:

.formHolder-section {width: 235px; position: relative; float: left; margin: 0 20px 0 40px;}
.formHolder-section + .formHolder-section { margin: 0; }

これも機能しませんでした。最初のdivだけではなく、両方のdivにマージンを与えるだけで問題を解決しました。奇妙なことに... 最初の子セレクターを除いて、他のすべての CSS がここで機能します。何が問題の原因であるかを誰かが知っているかどうか疑問に思っています。

HTML の一部を次に示します (ただし、HTML/CSS は IE7 を除くすべての場所で機能します)。

<div class="formContainer">
    <div class="formHolder-section">
        <span class="form-required">*Denotes field as required</span>
        <ul class="form-list">
            <li>
                <label>First:*</label>
                <input type="text" value="" class="form-input-full" name="firstName" id="firstName">
            </li>
            <li>
                <label>Last:*</label>
                <input type="text" value="" class="form-input-full" name="lastName" id="lastName">
            </li>
            <li>
                <label>Email Address:*</label>
                <input type="text" value="" class="form-input-full" name="email" id="email">
            </li>
            <li>
                <label class="listOptionPadding">Are you 18 years old?*</label>
                <input type="radio" value="true" class="form-radio" name="over18" id="over181"> <span class="italic">Yes</span>
                <br>
                <input type="radio" value="true" class="form-radio" name="over18" id="over182"> <span class="italic">No</span>
            </li>
            [...]
        </ul>
    </div>
    <div class="formHolder-section">
        <ul class="form-list">
            <li>
                <label class="listOptionPaddingBottom">When Do You Intend to Purchase a New Vehicle?</label>
                <input type="radio" value="1_MONTH" class="form-radio" name="nextPurchase" id="nextPurchase1"> <span class="italic">Within a Month</span>
                <br>
                <input type="radio" value="3_MONTH" class="form-radio" name="nextPurchase" id="nextPurchase2"> <span class="italic">Within the next 3 Months</span>
                <br>
                <input type="radio" value="6_MONTH" class="form-radio" name="nextPurchase" id="nextPurchase3"> <span class="italic">Within the next 6 Months</span>
                <br>
                <input type="radio" value="WITHIN_YEAR" class="form-radio" name="nextPurchase" id="nextPurchase4"> <span class="italic">Within a Year</span>
                <br>
                <input type="radio" value="OVER_YEAR" class="form-radio" name="nextPurchase" id="nextPurchase5"> <span class="italic">More than 1 Year</span>
            </li>
            <li class="interested-in">
                <label>What Toyota vehicles are you interested in?</label>
            </li>
            [...]
        </ul>       
        <input type="submit" value="Submit" class="form-button rounded">
        <a class="form-terms" href="/ToyotaMotorApp/mobile/tyw/terms.html">View all the terms and conditions</a>
    </div>
</div>

DOCTYPE は次のとおりです (ここでは HTML5 を使用しています。間違いなく、quirksmode で奇妙なものを見てきましたが、これが問題だとは思わないでください)。メディア クエリにモダナイザーを使用する (これはレスポンシブ サイトです):

<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  • ちなみに、これは IE8 から取得しました (IE7 では html タグが異なりますが、現在別の VM でテストしています)。
4

1 に答える 1

0

2つの言葉-クァークズモード。IE9に到達するまで、最初の子の疑似セレクターは実際にはうまく機能しません。

http://www.quirksmode.org/css/contents.html#t17

于 2012-09-05T00:14:11.310 に答える