css - 使用 wells 的 Twitter bootstrap(safari vs chrome)

Question

有人可以帮助我理解为什么井在 Safari 中正确而在 Chrome 中不正确(重叠)吗？

这是它在 Chrome 中的样子 http://i.imgur.com/OOeTw8b.png

基本上，这些井在 Chrome 中是重叠的。 (在彼此之上)

代码很简单

  <div class='row-fluid'>
        <div class='span4'>
          <div class='well well-large' style='width:100%; display:table; background:#ffffff;'>
            <b>Hosts Down</b>
             data
          </div>
          <div class='well well-large' style='width:100%; display:table; background:#ffffff;'>
            <b>Critical Services</b>
              data
          </div>
          <div class='well well-large' style='width:100%; display:table; background:#ffffff;'>
            <b>Links</b>
               data
          </div>
        </div>
        <div class='span8'>
          <div class='well well-large' style='width:100%; display:table; background:#ffffff; text-align:center;'>
            graphs
          </div>
        </div>
  </div>

Answer 1

这只是一个猜测，但看看你的代码，我想这是因为你的内联样式。您指定了 100% 的宽度，但这些井也会有填充，这将加起来超过父容器的 100%。

也就是说，不要使用内联样式。