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

Question

我有一系列值，在此 page 上预先选中了复选框。在所有浏览器中的外观和工作都很好，除了 Safari。当我单击任何复选框时，它们 'jump' 或 'drop' 向下移动，然后移回原位。

我做了一些研究，但我没有找到任何关于如何防止箱子移动的信息。

这是复选框的代码：

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

这是因为您为复选框设置了自定义宽度和高度。如果您从 CSS 中删除宽度和高度规则，则复选框会在您选中它们时停止移动。

了解您希望它们更大，请研究其他自定义复选框的方法。

这是一种常见的方式： http://webdesign.tutsplus.com/articles/quick-tip-easy-css3-checkboxes-and-radio-buttons--webdesign-8953

Answer 2

问题是 width 和 height 属性。为什么这很重要是任何人的猜测，我找不到关于这个问题的任何信息。似乎 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 3

http://jsfiddle.net/51chuew0/

input[type="checkbox"] { 
 width: 25px; 
    height: 25px;   
    -webkit-transform: scale(1.3);    
 -moz-transform: scale(1.3);
 -o-transform: scale(1.3);
 -ms-transform: scale(1.3);
 transform: scale(1.3);
    display: inline-block;    
    margin-right: 5px; 
    border: 1px solid #0070BB; 
    } 
.matrix {
    -webkit-transform: matrix3d(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); /* safari and chrome */
}

<p>
<div class="matrix"></div>    
<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 4

最简单但可行的解决方案是：

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

在你的 css.

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

Why do checkboxes move when checked in Safari?

css

forms

safari

checkbox