当前位置：文江博客话题详情

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

发布于 2024-08-15 04:15:50 字数 572 浏览 4 评论 0 原文

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

原文

I have some html which looks like this:

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

in IE.8 this is shown as

fig       vitamin
apple     vitamin
coconut   vitamin

and all of the 'vitamins' are nicely aligned.
in Chrome the gap is not created and therefore it is not nicely rendered.

figvitamin
applevitamin
coconutvitamin

The question is:
is this a problem/bug with Chrome or is it because the html is not correct and ie8 (in this case) just guesses better my intentions ?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

樱桃奶球 2024-08-22 04:15:50

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

内联块

您可以这样做：

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

with:

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

您会注意到我使用了而不是

。这是有原因的。自然是 display: inline 并根据怪异模式：

在 IE 6 和 7 中 inline-block 有效
只针对具有自然属性的元素
显示：内联。

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

浮动

您可以浮动左侧标签：

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

with：

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

如果

之后的文本足够大，它将换行到行的开头（不使用 80 像素）缓冲）。你可能想要也可能不想要。

定义列表

使用此标记：

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

with:

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

Tables

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

with:

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>
...

Chrome and Firefox are correct. Width is not a valid style property for inline elements. You have several options:

Inline Blocks

You can do this:

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

with:

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

You'll notice I used <span> instead of <div>. There is a reason for this. <span>s are naturally display: inline and according to Quirksmode:

In IE 6 and 7 inline-block works
only on elements that have a natural
display: inline.

Firefox 2 and lower don't support this
value. You can use -moz-inline-box,
but be aware that it's not the same as
inline-block, and it may not work as
you expect in some situations.

Floats

You can float the left labels:

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

with:

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

If the text after the <div> is sufficiently large it will wrap to the beginning of the line (not with the 80px buffer). You might want that or not.

Definition List

Using this markup:

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

with:

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

Tables

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

with:

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

Tables will be by far the most backward compatible solution (going back to IE5 or earlier) so they're still often used in situations where some might argue they aren't appropriate. The ideals of the so-called semantic Web are well-intentioned and worth adhering to where possible but you'll also often end up in situations where you're choosing between "semantic purity" and backwards compatibility so a certain amount of pragmatism needs to prevail.

That being said, unless you're not telling us something, you shouldn't need to go this path if you don't want to.

Lastly, always put a DOCTYPE declaration on your pages. It forces IE from quirks mode to standards compliant mode (both euphemisms). For example:

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

回复收藏 0 原文

梦情居士 2024-08-22 04:15:50

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

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

我想之后可以用替换外部 div。

You could use a div that is floated to the left for the headings - this is popular for two column forms and the like on websites that don't want to use tables, or need more flexibility that the strict layout that a table restricts you to.

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

I guess the outer div could be replaced with a <br clear="both" /> afterwards.

回复收藏 0 原文

~没有更多了~

关于作者

公布

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

内联块

浮动

定义列表

Tables

Inline Blocks

Floats

Definition List

Tables

关于作者

相关话题

热门标签

推荐作者

留蓝

18790681156

zach7772

Wini

ayeshaaroy

初雪

友情链接

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

内联块

浮动

定义列表

Tables

Inline Blocks

Floats

Definition List

Tables

关于作者

相关话题

热门标签

推荐作者

留蓝

18790681156

zach7772

Wini

ayeshaaroy

初雪

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。