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

Question

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

我用于滑块的 css 都是一样的，但是当我将鼠标悬停在元素上时，右侧的滑块会一直闪烁。这是我正在 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你应该没事。