Chrome和div上的固定宽度(或其他标签) [英] Chrome and fixed width on a div (or other tags)
问题描述
我有一些看起来像这样的html:
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>
在IE.8中显示为
fig vitamin
apple vitamin
coconut vitamin
和所有的维生素"都很好地结合在一起. 在Chrome中，不会创建间隙，因此无法很好地呈现间隙.
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
问题是: 这是Chrome的问题/错误，还是因为html不正确，而ie8(在这种情况下)只是猜测出我的意图更好?
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 ?
推荐答案
Chrome和Firefox是正确的.宽度对于内联元素不是有效的样式属性.您有几种选择:
Chrome and Firefox are correct. Width is not a valid style property for inline elements. You have several options:
您可以执行以下操作:
<span>fig</span>vitamin<br>
<span>apple</span>vitamin<br>
<span>coconut</span>vitamin
具有:
span { display: inline-block; width: 80px; }
您会发现我使用的是<span>而不是<div>.有一个原因. <span>自然是display: inline，并且根据 Quirksmode :
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:
在IE 6和7中
inline-block起作用 仅在具有自然特征的元素上display: inline.
In IE 6 and 7
inline-blockworks only on elements that have a naturaldisplay: inline.
Firefox 2及更低版本不支持此功能
价值.您可以使用-moz-inline-box，
但请注意，这与
inline-block，可能无法正常运行
您期望在某些情况下.
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
具有:
div { float: left; clear: left; width: 80px; }
如果<div>之后的文本足够大，它将换行到该行的开始(不适用于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.
使用此标记:
<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或更早的版本)，因此它们仍经常用于某些人可能认为不合适的情况.所谓语义网的理想是有良好意图的，并且在可能的情况下值得坚持，但是您通常还会遇到在语义纯净"和向后兼容之间进行选择的情况，因此，一定程度的实用主义需要占上风.
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.
最后，总是在页面上放置一个DOCTYPE声明.它将IE从怪癖模式转换为符合标准的模式(两种委婉说法).例如:
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>
...
这篇关于Chrome和div上的固定宽度(或其他标签)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
