Question

我正在试图找出为什么padding包含在Chrome（Mac版本27.0.1453.110）的滚动内容中，但不包含在Firefox（Mac 21.0）中。我正在使用box-sizing: border-box;当我点击滚动内容时，Chrome中有填充内容，但在Firefox中，最后一个元素是底部，下面没有任何填充。我应该使用保证金吗？这是其中一个浏览器的错误吗？

我有example on codepen

CSS：

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

body {
  background-color: #222;
}

p {
 padding-bottom: 20px; 
}

.boxy {
  background-color: #111;
  border: 4px solid #FFFFFF;
  height: 442px;
  overflow: auto;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 722px;
}

.inside-boxy {
  background-color: #ff6000;
  height: 160px;
  padding: 12px 50px 50px 28px;
  position: absolute;
  overflow-y: scroll;
}

.in-links {
  background-color: #fff;
  height: 132px;
  margin-top: 22px;
  width: 600px;
 }

HTML：

<html>

  <head>
    <title>Paul Irish Box Model FTW</title>
    <meta charset="utf-8">
  </head>

  <body>

    <div class="boxy">

      <div class="inside-boxy">
        <p>...</p>
        <p>...</p>
        <div class="in-links">links!</div>
      </div>

    </div>

  </body>

</html>

Answer 1

.inside-boxy有一个固定的高度。我不会通过该容器发出填充。相反，我会发出.inside = boxy固有的组件的填充和边距属性。我在下面重写了你的CSS。如果您有任何问题，请告诉我。

       p {
 padding:20px; 
}

.boxy {
  background-color: #111;
  border: 4px solid #FFFFFF;
  height: 442px;
  overflow: auto;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 722px;
}

.inside-boxy {
  background-color: #ff6000;
  height: 160px;
  position: absolute;
  overflow-y: scroll;
  width:100%;
}

.in-links {
  background-color: #fff;
  height: 132px;
  margin:20px 0 20px 0;
  width: 100%;
 }

使用填充Webkit v.Firefox的溢出滚动

1 个答案: