Keystone

http://css.maxdesign.com.au/listamatic/about-boxmodel.htm

• There are two things you should be aware of when developing CSS styled lists

  IE and the box model

  IE versions and Doctype modes

  IE and the box model

  Love it or hate it, Internet Explore for Windows is the main browser on the web at present. This means that at some point you will have to deal with IE's incorrect interpretation of the box model.

  In simple terms this means that some versions of IE render the box model to a different width than other Standards browsers. So, your CSS styled list may look narrower in IE compared to other browsers.

  The diagram below shows that if a content box is set to 200px wide with 20px of padding and a 20px wide border, the correct method of calculating the overall box width is:
  content (200px) + padding (20px+20px) + borders (20px+20px) = 280px.

  However, some versions of IE calculate the width as:
  content, padding and borders together = 200px.

  

  The solutions are to work around the problem using nested divs or use one of many box model hacks.

• 我们定义一个最基本的层：

  boxtest
  div.boxtest{ 
  border:20px   solid #60A179;
  padding: 30px;
  background :  #ffc;
  width : 400px;
  }

  标准情况下，这个盒的宽度是:20+30+300+30+20=400px。

  但是在IE5.0浏览器中，对盒模型的宽度解释有个bug，它认为300 px是整个盒的总宽度，内容的宽度变成：300-20-30-20-30=200px。

  为了弥补这个bug，采用一个技巧：即增加一个IE5不能解释的声音属性"voice-family",读到这个定义时浏览器就不再继续阅读，认为宽就是400px，但而其他符合标准的浏览器会继续阅读，并执行第二个真实值300px。

  content
  div.content{
  border:20px solid #60A179;; 
  padding:30px;
  background: #ffc;
  width :400px;
  voice-family :   "\"}\"";
  voice-family :inherit;
  width :  300px;
  }

  同样，在Opera7.0以前的浏览器也有这样的解析bug。但我们并不需要使用伪值，有更简单的办法解决这个问题： html>body .content { width :300; }