小编SoK*_*KeT的帖子

大屏幕 Windows 版 Chrome 上的 Swiper 插件存在问题。它在幻灯片的左侧留下了空白，我创建了一支笔来演示这一点：

https://codepen.io/anon/pen/BwMxWX

HTML：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
</div>

CSS：

.swiper-slide {
  width: 100vw;
  height: 300px;
}

.swiper-slide:nth-child(1) { background-color: lightpink; }
.swiper-slide:nth-child(2) { background-color: lightblue; }
.swiper-slide:nth-child(3) { background-color: lightgrey; }

JS：

new Swiper(".swiper-container", {
  loop: true
});

请记住，它只会在这些情况下发生。即使您在 Windows 上使用 Chrome，如果窗口大小小于（大约）2000 像素，那么它也不会发生。

在插件的主页上有一个全宽示例并且该问题不存在，但我并不真正理解首先是什么导致它发生。任何帮助将不胜感激。

更新：

我发现这只会在使用“幻灯片”效果时发生，这是默认设置。将其更改为任何其他修复它，但这远非解决方案。

我正在制作一个带有两个按钮的投票系统(upvote/downvote).我已经使用输入和标签来创建它,但是有一个问题:

如果我使用单选按钮,我可以向上或向下投票,但我不能不投票.

如果我使用复选框,我可以取消投票,但我也可以上下投票.

我想要实现的是只能投票或者投票,同时还能够取消投票(想想reddit).

我已经彻底找到了答案,我发现这不可能与CSS有关.有很多脚本,问题是我不知道JavaScript或jQuery,所以我不知道如何实现代码.

我认为最简单的解决方案是在点击upvote时取消选中downvote按钮,反之亦然,但同样,我不知道这段代码是什么样子或如何实现它.

也许有一个更容易的解决方案使用纯CSS来改变其他按钮的外观,即使它被检查后？我不知道,但如果它存在,我宁愿使用这样的解决方案.

我的代码:

input[type=radio] {
  display: none
}
#up {
  width: 20px;
  height: 16px;
  background: url(http://c.thumbs.redditmedia.com/Y5Gt7Gtk59BlV-3t.png) left top;
  position: absolute;
  left: 50px;
  top: 50px
}
#down {
  width: 20px;
  height: 16px;
  background: url(http://c.thumbs.redditmedia.com/Y5Gt7Gtk59BlV-3t.png) left bottom;
  opacity: 0.5;
  position: absolute;
  left: 50px;
  top: 84px
}
#vote {
  width: 21px;
  height: 18px;
  text-align: center;
  font-size: 26px;
  line-height: 18px;
  position: absolute;
  left: 50px;
  top: 66px;
  z-index: -1
}
#up:hover {
  background-position: top;
  cursor: pointer
}
#upvote:checked ~ #up …