div（或其他标签）上的 Chrome 和固定宽度答案

【问题标题】：Chrome and fixed width on a div (or other tags)div（或其他标签）上的 Chrome 和固定宽度
【发布时间】：2010-12-26 09:13:26
【问题描述】：

我有一些看起来像这样的 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（在这种情况下）只是更好地猜测我的意图？

【问题讨论】：

试试维生素c
@Pandiya Chendur：这仍然无法将不同的“维生素”相互对齐。

标签： google-chrome width fixed fixed-width

【解决方案1】：

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 和 7 中 inline-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; }

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

话虽如此，除非你没有告诉我们什么，否则你不应该走这条路，如果你不想。

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> 
<html>
...

【讨论】：

谢谢克莱图斯。你能告诉我更多吗？由于 Width 不是内联元素的有效样式属性，您认为这是最有效的解决方法。我倾向于计算每个水果名称的空格，以便它们都具有相同的长度（比如说 20 个字符长），然后放置一个固定的字体。但是有没有更好的方法呢？
再次感谢 Cletus。但是，我尝试了您的“内联块”解决方案和“浮动”解决方案。我可以告诉你，它们都不能在 Chrome 中工作。那么在“内联块”中，为什么 chrome 会忽略我的固定宽度？

【解决方案2】：

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

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

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

【讨论】：