小编Ram*_*uiz的帖子

我的网站重新设计遇到了一些问题，案例研究中有一部分目标是粘性的，一旦你传递了一张图像，目标就会被完成。因为我使用的是全角图像，所以我希望目标部分位于下方，当您滚动时再次看到它，目标已经交叉，它在 chrome 和 firefox 上效果很好，但在 safari 上效果不佳。这很奇怪，因为当我使用 Web 检查器时，Safari 中的元素会表现得像它应该的那样，并且它位于图像下方。

有人知道会发生什么吗？

示例链接

我一直想在桌子上添加水平阴影，但当前的解决方案（Lea Verou）在包装器上使用背景渐变，并且桌子上的行具有背景颜色，因此效果消失。

我正在考虑在顶部添加一个伪元素，但我很难使其与表格一样宽，并且有另一个包装器来设置阴影的背景渐变。

以下是当前的解决方案以及它如何不适用于具有背景的元素。

<div class="scrollbox">
    <ul>
        <li>Scroll right</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>10</li>
        <li>The end!</li>
        <li>No shadow there.</li>
    </ul>
</div>

.scrollbox {
    overflow: auto;
    max-width: 400px;
    max-height: 200px;
    margin: 50px auto;
    ul {
      max-width: 200%;
    }
    li {
      display: table-cell;
      padding: 1em;
      border: 1px solid #bebebe
    }
    li:nth-child(odd) {
    color: #fff;
    background-color: rebeccapurple;
  }

  background-image: 
    linear-gradient(to right, white, white),
    linear-gradient(to right, white, white),

    linear-gradient(to right, rgba(0,0,0,.25), rgba(255,255,255,0)),
    linear-gradient(to left, rgba(0,0,0,.25), rgba(255,255,255,0));   
    background-position: left center, right …