1

我有一些看起来像这样的html：

<div style="{ display:inline; width: 80px}">fig</div>vitamin c<br>
<div style="{ display:inline; width: 80px}">apple</div>vitamin a<br>
<div style="{ display:inline; width: 80px}">coconut</div>vitamin <br>

在 IE.8 中，这显示为

无花果维生素
苹果维生素
椰子维生素

并且所有的“维生素”都很好地排列在一起。在 Chrome 中，没有创建间隙，因此渲染得不好。

无花果维生素
苹果维生素
椰子维生素

问题是：这是 Chrome 的问题/错误，还是因为 html 不正确而 ie8（在这种情况下）只是更好地猜测我的意图？

4

2 回答 2

4

Chrome 和 Firefox 是正确的。宽度不是内联元素的有效样式属性。你有几个选择：

内联块

你可以这样做：

<span>fig</span>vitamin<br>
<span>apple</span>vitamin<br>
<span>coconut</span>vitamin

和：

span { display: inline-block; width: 80px; }

你会注意到我使用<span>了而不是<div>. 有一个原因。<span>s 自然是display: inline根据Quirksmode：

在 IE 6 和 7inline-block中，仅适用于具有自然 display: inline.

Firefox 2 及更低版本不支持此值。您可以使用-moz-inline-box，但请注意它与 不同 inline-block，并且在某些情况下它可能无法按预期工作。

花车

您可以浮动左侧标签：

<div>fig</div>vitamin<br>
<div>apple</div>vitamin<br>
<div>coconut</div>vitamin

和：

div { float: left; clear: left; width: 80px; }

如果 之后的文本<div>足够大，它将换行到行首（而不是 80px 缓冲区）。你可能想要也可能不想要。

定义列表

使用此标记：

<dl>
  <dt>fig</dt><dd>vitamin</dd>
  <dt>apple</dt><dd>vitamin</dd>
  <dt>coconut</dt><dd>vitamin</dd>
</dl>

和：

dt { float: left; width: 80px; }

表

<table>
<tbody>
<tr>
  <td class="left">fig</td>
  <td>vitamin</td>
</tr>
  <td>apple</td>
  <td>vitamin</td>
</tr>
  <td>coconut</td>
  <td>vitamin</td>
</tr>
</tbody>
</table>

和：

table { border-collapse: collapse; }
td.left { width: 80px; }

表格将是迄今为止最向后兼容的解决方案（回到 IE5 或更早版本），因此它们仍然经常用于某些人可能认为它们不合适的情况。所谓语义 Web的理想是善意的，值得在可能的情况下坚持，但您也经常会在“语义纯度”和向后兼容性之间做出选择，因此需要一定程度的实用主义占上风。

话虽如此，除非您没有告诉我们什么，否则如果您不想这样做，则无需走这条路。

最后，始终在您的页面上放置 DOCTYPE 声明。它迫使 IE 从怪癖模式到标准兼容模式（两种委婉说法）。例如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> 
<html>
...
于 2009-12-14T10:23:46.153 回答
1

您可以使用浮动到左侧的 div 作为标题 - 这对于不想使用表格的网站上的两列形式等很受欢迎，或者需要更多灵活性而不是表格限制您的严格布局.

<div class="wrapper">
    <div style="float: left; width: 80px;">Banana</div>
    <div>Vitamin Awesome</div>
</div>

我猜外部 div 可以替换为<br clear="both" />之后。

于 2009-12-14T10:27:44.777 回答