0

我有一个包含以下元素的页面：

<body>
    <div class="C2">
        <div class="Ban">
            <div class="blockWithLabel position BankCode">
                <span>BankCode</span>
                <br />
                <input type="text"/>
            </div>
            <div class="blockWithLabel position BranchCode">
                <span>BranchCode</span>
                <br />
                <input type="text" style="width:500px"/>
            </div>
            <div class="blockWithLabel position AccountNumber">
                <span>AccountNumber</span>
                <br />
                <input type="text"/>
            </div>
            <div class="blockWithLabel position CheckDigits">
                <span>CheckDigits</span>
                <br />
                <input type="text"/>
            </div>
            <div class="blockWithLabel position BankName">
                <span>BankName</span>
                <br />
                <input type="text"/>
            </div>
            <div class="position validator">
                <div class="validator">VALIDATOR</div>
            </div>
        </div>
    </div>
</body>

我想应用这种风格：

        .Ban { overflow:hidden }
    div.blockWithLabel { display:inline-table; overflow:none; }

    .C2 { background-color: blue; }
    .C2 div.blockWithLabel { background-color:yellow; margin:2px;}
    .C2 div.position { float:left}

对于所有浏览器，我在同一行中有 6 个元素（如果屏幕宽度足够大）

现在，我想使用

.C2 div.position.AccountNumber, .C2 div.position.validator { clear:left }

问题是在 IE7 中，AccountNumber 出现在新行中，但下一个元素 CheckDigit 和 BankName 没有出现在同一行中，而是出现在前一行中！

我该如何解决？

4

1 回答 1

1

对 IE7 使用条件注释

<!--[if lte IE 7]>
<style type="text/css">
    /* hide other layout for other browsers by 
       setting display to none 
    */
    .C2 {
        display:none;
    }
</style>
Use ie7 formatting here with tables instead of divs.
<table>
    <TR>
        <T...................
<![endif]-->
于 2013-01-16T09:01:05.030 回答