English 中文(简体)
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 ?

最佳回答

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>
...
问题回答

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.





相关问题
Redirect to cache URL in Chrome browser

self.location = cache: + self.location I want to redirect from "[URL]" to "cache:[URL]". I just want this code to work in Chrome browser.

我如何更新/重载 Chrome延?

I m在4号 Chrome(目前为4.0.249.0)中开发一个延伸点,显示用户在地位酒吧中的形象。 Ive设计了一个供用户使用的备选办法网页......

Setting Opacity in CSS For Chrome

I ve tried the following: (this is actually for fancybox, as the overlay does not show in chrome/safari: $("#fancy_overlay").css({<br /> background-color : opts....

Chrome Blocking Javascript, Google Wave, Google Gadgets

Project: Developing a gadget template for Google Wave which will allow my Flash movies to interact with the Wave api. I had to adapt the existing Flex application so that it would work with ...

image height using jquery in chrome problem

$( img ).height() returns 0 in chrome, but it returns the actual height in IE and firefox. Whats the actual method to get the height of the image in chrome?

jQuery block moving

I wanna move a div block to the top, so I coded like this: CSS part: .movingPart{ margin-top:80px; } jQuery part: $(document).ready(function() { $( #btn ).click(function() { $( .movingPart )....

Table cells bad rendering with Google Chrome/Webkit

On the following code, COL1A and COL3A are not 50% height with Chrome or Webkit. It works fine with IE7 and Firefox. <table border="1"> <tr> <td height="100%">COL 1A</td>...

热门标签