Question

我有一些看起来像这样的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中

显示为

fig       vitamin
apple     vitamin
coconut   vitamin

并且所有'维生素'都很好地对齐。在Chrome中，不会创建间隙，因此渲染效果不佳。

figvitamin
applevitamin
coconutvitamin

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

Answer 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>。有一个原因。根据{{3}}，<span>自然为display: inline：

在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; }

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

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

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

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

Answer 2

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

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

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

div和其他标签上的Chrome和固定宽度

2 个答案:

内联块

浮筒

定义列表

表