Question

我正在使用box-sizing：border-box;在我的网站上制作我的盒子的元素在多个浏览器上表现相同。自从我开始创建网站以来，它的工作非常好，但今天盒子大小突然停止工作。我不知道可能是什么问题。非常感谢帮助！

以下是我网站的链接：http://amazive.com 正如您所看到的，所有方框都将填充“放在”外部而不是“在框内”。

这是我的重置代码：

* {
    margin:0; 
    padding:0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

谢谢，弗雷德里克

Answer 1

加载您的网站我在控制台中看到以下错误：

Selector expected.  Ruleset ignored due to bad selector. main.css:1

如果您查看main.css文件的第一行，您会看到它是：

</*****************************************************

取下前导角括号，使其如下所示：

/*****************************************************

Answer 2

从我收集到的内容，您希望box-sizing; border-box;成为您所有的元素？为此，请使用此代码

/* apply a natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box;
 }

这是一个codepen示例： http://codepen.io/camdixon/pen/DgrGC

我从这里得到了答案： http://www.paulirish.com/2012/box-sizing-border-box-ftw/

更详细的答案和IE技巧在这里找到： * { Box-sizing: border-box; } : To border-box or not to border-box all elements?

盒子大小突然停止工作

2 个答案: