Question

我正试图让这个css布局与IE7一起工作，我有点卡住了。有关如何在不更改页面结构的情况下使表单看起来像在FF和Chrome中的任何想法？我知道有一些IE特定的CSS黑客攻击，但我不完全确定如何应用它们。

在FF和Chrome中，表单正确显示表格如下：

title
first last
street
city state zip
occupation bday

在IE中，表格全是混乱：

title last state zip
street 
city

CSS

...
form label  { float: left; margin: 0px 10px 0px 0px; }
form input  { width:100%; }
form select { width:100%; }

form label.field-title        { width: 50px; clear: left; }
form label.field-title select { width: 50px; }

form label.field-first { width: 150px; clear: left; }
form label.field-last  { width: 150px; }

form label.field-street{ width: 310px; clear: left; }

form label.field-city  { width: 150px; clear: left; }
form label.field-state { width: 70px; }
form label.field-zip   { width: 70px; }

form label.field-occupation   { width:150px; clear:left; }
form label.field-bday   { width:150px; }
...

HTML

...
<form>
  <fieldset>
    <legend>Basic Information</legend>
    <label class="field-title">
        Title &#42;<select name="EmployeeName.Title">
            <option value="Mr.">Mr.</option>
            <option value="Mrs.">Mrs.</option>
            <option value="Ms.">Ms.</option>
        </select>
    </label>
    <label class="field-first">
        First Name &#42;<input name='first' /></label>
    <label class="field-last">
        Last Name &#42;<input name='last' /></label>
    <label class="field-street">
        Street &#42;<input name='street' /></label>
    <label class="field-city">
        City &#42;<input name='city' /></label>
    <label class="field-state">
        State &#42;<select name='state' >
        <option>test</option></select></label>
    <label class="field-zip">
    Zip &#42;<input name='zip' /></label>   
    <label class="field-occupation">
    Occupation &#42;<input name='occupation' /></label>
    <label class="field-bday">
        Birth Day &#42;<input name='bday' /></label>
  </fieldset>
</form>
...

文档类型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Answer 1

我不认为你可以不修改源代码。 IE6 / 7使用与其他浏览器不同的浮点逻辑，并且没有任何方法可以告诉它们“不要将它一直浮动到顶部”。

这就是大多数表单使用某种包装来清除行的原因。我用divs

<div class="row">
    <label class="field-title">
        Title &#42;<select name="EmployeeName.Title">
            <option value="Mr.">Mr.</option>
            <option value="Mrs.">Mrs.</option>
            <option value="Ms.">Ms.</option>
        </select>
    </label>
</div>
<div class="row">
    <label class="field-first">
        First Name &#42;<input name='first' /></label>
    <label class="field-last">
        Last Name &#42;<input name='last' /></label>
</div>

.row {clear:both;}

Answer 2

编辑：我在字段集中添加了一个宽度，在标题标签上添加了一个右边距：

form fieldset { width:320px; }

form label.field-title { width: 50px; margin: 0 250px 0 0; clear: left; }

这使得标题＆lt; label＆gt;占据大部分字段集宽度，迫使其他元素到位。

您可以通过IE7进行演示：http://demo.raleighbuckner.com/so/1369556/

编辑2：对此最好的解决方案是做Emily（以及对Emily的回答评论）并建议将表单字段的每一行放在包装器中。就个人而言，我喜欢使用无序列表（如wheresrhys）。在此演示中可以看到此示例：http://demo.raleighbuckner.com/so/1369556/default2.htm

Answer 3

form label { float: left; margin: 0px 10px 0px 0px;display:inline}

可能作为显示器工作：内联趋向于使浮动和放大器表现得更好。清除，但在元素浮动时被好的浏览器忽略。

Answer 4

作为Emily said，它不适用于浮点数...但当然，你可以不在适当的时候使用浮点数。

从原始CSS更改以下语句，将它们从浮点数转换为（内联）块：

form label.field-title  { width: 50px; float: none; display: block; }
form label.field-last   { width: 150px; float: none; display: inline-block; }
form label.field-street { width: 310px; float: none; display: block; }

form label.field-zip   { width: 70px; float: none; display: inline-block; }

这也将继续在其他（最近的）浏览器中使用。

它是如何运作的？

IE7浮动的问题在于它们可以通过其他浮动“冒泡”。例如。 field-last在field-title旁边结束的原因是因为它不会清除其左侧而不是field-first。但是，它不会停留在field-first旁边，而是会在field-title旁边向上移动。

解决这个问题的最简单方法就是让field-title成为一个阻止。这可以防止它出现在它旁边的任何后续浮动。 field-street也是如此。你不希望它旁边出现任何东西，所以你可以把它变成一个块。

然而，这不适用于field-last，因为在符合标准的浏览器中，该块基本上包含前面的float。但由于它已经占据了它的全宽，所以它旁边没有任何空间。使它成为一个内联块而不是让它保持其块属性，同时将它放在浮点数旁边，而不是包含它。

field-zip同样如此，只有一个区别。 field-last后面跟着一个块，所以它不必担心任何浮动到右边的东西。但是，field-zip之后是一个浮点数，因此需要清除它的左边以防止它出现在Zip代码旁边。

为什么我不能清除：在IE7中留下这些标签？

4 个答案:

它是如何运作的？