css兼容性width 100%

CSS是网页设计中非常重要的一部分，它可以让网页有更好的外观和交互性。但是在使用CSS时，我们可能会遇到一些兼容性的问题。其中一个比较常见的问题就是width 100%的兼容性问题。

通常情况下，我们希望一个元素的宽度占据整个父元素的宽度，这时候我们就会将该元素的width设置为100%。然而，在某些情况下，这个元素可能并没有占据整个父元素的宽度，或者出现了异常情况，这就是width 100%的兼容性问题。

这个问题的出现原因往往与盒模型有关。在标准盒模型下，一个元素的宽度是由content-Box、border和padding共同构成的，而在IE盒模型下，一个元素的宽度只包含了content-Box。因此，当我们设置一个元素的width为100%时，在标准盒模型下，这个元素的宽度会被content-Box、border和padding之和所撑开，而在IE盒模型下，这个元素的宽度只会被content-Box所撑开。

/* 标准盒模型 */
.Box {
  Box-sizing: border-Box; 
  width: 100%; 
  border: 1px solid #ccc; 
  padding: 10px;
}

/* IE盒模型 */
.Box {
  Box-sizing: content-Box; 
  width: 100%; 
  border: 1px solid #ccc; 
  padding: 10px;
}

为了解决这个兼容性问题，我们可以通过设置盒模型来进行处理。在使用标准盒模型的情况下，我们只需要将Box-sizing设置为border-Box即可，这样就可以保证padding和border不会影响元素的宽度。而在使用IE盒模型的情况下，我们可以通过CSS hack来进行处理。

总之，在进行网页设计时，我们需要考虑到不同浏览器的兼容性问题，尤其是在使用CSS时，需要仔细考虑每一个细节，这样才能让网页在不同浏览器中都能够显示正常。