Question

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

<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不会出现在同一行，而是出现在上一行!!

我该如何解决？

Answer 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]-->

css float的替代方案，用ie7清除

1 个答案: