相关疑难解决方法(0)

假设你有一些风格和标记:

ul
{
  white-space: nowrap;
  overflow-x: visible;
  overflow-y: hidden;
/* added width so it would work in the snippet */
  width: 100px; 
}
li
{
  display: inline-block;
}

<div>
  <ul>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
  </ul>
</div>

当你看到这个.该<ul>有一个在底部的滚动条,即使我已经溢出X/Y指定的可见和隐藏价值.

(在Chrome 11和opera(？)上观察到)

我猜测必须有一些w3c规范或者某些东西告诉这件事发生但是对于我的生活我无法理解为什么.

的jsfiddle

更新: -我找到了一种方法来通过添加另一个元素来实现相同的结果ul.看看这个.

这个小提琴演示了一个里面有多个元素的容器：

<div class="container">
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
</div>

每个元素都有一个白色矩形作为伪元素出现在其上方。

为什么它们在容器的 x 轴处被切断？为什么它会overflow-y: scroll影响x轴？

CSS 简洁：

.container {
  position: absolute;
  overflow-y: scroll;
  height: 400px;
  width: 200px;
  border: 1px solid green;

  .element {
    height: 100px;
    padding: 10px;
    position: relative;
    margin-top: 10px;

     &::after {
       content: '';
       position: absolute;
       top: -20px;
       left: -30px;
       width: 50px;
       height: 20px;
       border: 1px solid black;
       background: white;
     }
  }
}