html - 与其他元素交互时图像闪烁

Question

因此，我正在创建此页面，其中有 4 张图像幻灯片，方向为 2x2。现在我对 html 和 css 还是很陌生，所以我不确定是我的代码的哪一部分导致了这个问题。

我用于 slider 的 css 都是相同的，但是当我将鼠标悬停在某个元素上时，右侧的 slider 会一直闪烁。这是我正在处理的页面 http://website-testing.site88.net/Smile.html .

代码示例如下:

    <input type="radio" name="slide1" id="S1_I1" checked>
    <input type="radio" name="slide1" id="S1_I2">
    <input type="radio" name="slide1" id="S1_I3">
    <input type="radio" name="slide1" id="S1_I4">

<ul id="container">
    <li class="left"> Placeholder 
      <div class="slides_container"> 
        <div class="slides">
        <ul>
            <li><div class="img">
                  <img src="pic/pic_1.jpeg">
                </div>
                <div class="nav">
                    <label for="S1_I2" class="next">&#x203a;</label>
                </div>
            </li>
            <li><div class="img">
                  <img src="pic/pic_2.jpg">
                </div>
                <div class="nav">
                    <label for="S1_I1" class="prev">&#x2039;</label>
                    <label for="S1_I3" class="next">&#x203a;</label>
                </div>
            </li>
            <li><div class="img">
                  <img src="pic/pic_3.jpg">
                </div>
                <div class="nav">
                    <label for="S1_I2" class="prev">&#x2039;</label>
                    <label for="S1_I4" class="next">&#x203a;</label>
                </div>
            </li>
            <li><div class="img">
                  <img src="pic/pic_2.jpg">
                </div>
                <div class="nav">
                    <label for="S1_I3" class="prev">&#x2039;</label>
                </div>
            </li>
        </ul>
        </div>
        </div>  
    </li>

知道是什么原因造成的吗？这也是我第一次创建网站，所以它在其他浏览器上可能看起来很丑，因为我不确定如何让它们看起来兼容

Answer 1

导致它的是这段代码:

/* -webkit-columns: 2; */
-moz-columns: 2;
-o-columns: 2;
columns: 2;

您可以在文件内第一行的 smile.css 中找到它。

拿出来就不闪了。但是你必须稍微移动一下，因为它会稍微弄乱你的图像定位。无论如何，不​​要使用 columns:2 应该没问题。