Chrome and fixed width on a div (or other tags)
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开发者_Go百科 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 ?
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-blockworks only on elements that have a naturaldisplay: 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 asinline-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>
...
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.
加载中,请稍侯......
精彩评论