为什么在Safari中选中复选框时会移动？

Question

我有一系列值,在此页面上预先选中了复选框.所有浏览器的外观和工作都很好,除了Safari.当我点击任何一个复选框时,他们会'跳'或'掉'然后再回到原位.

我做了一些研究,但我没有找到任何关于如何防止盒子移动的事情.

这是复选框的代码:

input[type="checkbox"] {
  width: 25px;
  height: 25px;
  -webkit-transform: scale(1.3, 1.3);
  display: inline-block;
  margin-right: 5px;
  border: 1px solid #0070BB;
}

<p><input type="checkbox" class="multiple" value="n" name="n" /><img src="/photos/map/icon_nacelle.png" alt="icon_nacelle" width="25" height="25" /> <span class="filterby">Nacelle<span class="counts" id="n-count"></span></span><br />

  <input type="checkbox" class="multiple" value="b" name="b" /><img src="/photos/map/icon_blade.png" alt="icon_blade" width="25" height="25" /> <span class="filterby">Blade/rotor<span class="counts" id="b-count"></span></span><br />

  <input type="checkbox" class="multiple" value="t" name="t" /><img src="/photos/map/icon_tower.png" alt="icon_tower" width="25" height="25" /> <span class="filterby">Tower<span class="counts" id="t-count"></span></span><br />

  <input type="checkbox" class="multiple" value="f" name="f" /><img src="/photos/map/icon_foundation.png" alt="icon_foundation" width="25" height="25" /> <span class="filterby">Foundation<span class="counts" id="f-count"></span></span><br />

  <input type="checkbox" class="multiple" value="tr" name="tr" /><img src="/photos/map/icon_transmission.png" alt="icon_transmission" width="25" height="25" /> <span class="filterby">Transmission/Electrical<span class="counts" id="tr-count"></span></span><br
  />

  <input type="checkbox" class="multiple" value="o" name="o" /><img src="/photos/map/icon_offshore.png" alt="icon_offshore" width="25" height="25" /> <span class="filterby">Offshore Services<span class="counts" id="o-count"></span></span><br />

  <input type="checkbox" class="multiple" value="p" name="p" /><img src="/photos/map/icon_professional.png" alt="icon_professional" width="25" height="25" /> <span class="filterby">Professional Services<span class="counts" id="p-count"></span></span><br
  />

  <input type="checkbox" class="multiple" value="fi" name="fi" /><img src="/photos/map/icon_field.png" alt="icon_field" width="25" height="25" /> <span class="filterby">Field Services<span class="counts" id="fi-count"></span></span><br />

  <input type="checkbox" class="multiple" value="r" name="r" /><img src="/photos/map/icon_research.png" alt="icon_research" width="25" height="25" /> <span class="filterby">Research/workforce dev<span class="counts" id="r-count"></span></span>
</p>

如何设置复选框的样式以使其处于静止状态,并且仅在单击时更改状态？

Answer 1

问题是width和height属性.为什么重要的是任何人猜测,我找不到有关此问题的任何信息.似乎宽度和高度属性适用于框的默认状态,但在呈现初始状态和备用状态之间的转换时会被抛出.

最好的解决方案可能是:

input[type="checkbox"] { 
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -ms-transform: scale(2);
  -o-transform: scale(2);
  transform: scale(2);

  display: inline-block;
  margin-right: 5px; 
  border: 1px solid #0070BB; 
} 

您还可以使用条件注释来定位旧版本的IE(如果您支持它们),然后添加显式高度和宽度以获得您正在寻找的样式:

<!--[if lt IE 9]>
  <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

Answer 2

最简单但有效的解决方案是:

input[type="checkbox"] {
  height: auto;
  width: auto;
}

在你的CSS.