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

回答1:

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

回答2:

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.

来源：https://stackoverflow.com/questions/1900078/chrome-and-fixed-width-on-a-div-or-other-tags

标签

google-chrome

width

fixed

fixed-width