3

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

我有一个关于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>
4

1 回答 1

0

.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%;
 }
于 2013-07-01T04:14:14.673 回答