在Safari中选中复选框后，为什么复选框会移动？ [英] Why do checkboxes move when checked in Safari?

问题描述

在此页面上，我具有一系列带有复选框的值。在所有浏览器中（Safari浏览器除外），外观和工作状况都不错。当我单击任何复选框时，它们会跳或放下，然后移回原位。

I have a series of values with checkboxes pre-checked on this page. The look and work fine in all browsers, except Safari. When I click on any of the checkboxes they 'jump' or 'drop' down and then move back into position.

我做了一些研究，但没有找到

I did some research, but I didn't find anything about how to keep the boxes from moving.

以下是复选框的代码：

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>

如何设置复选框的样式，使其处于固定状态并仅在单击时更改状态？ / p>

How do I style the checkboxes so they are stationary and only change state when clicked?

推荐答案

问题是宽度和高度属性。任何人都猜测为什么如此重要，而我找不到有关此问题的任何信息。似乎width和height属性适用于框的默认状态，但是在渲染初始状态和备用状态之间的过渡时会被丢弃。

The issue is the width and height properties. Why exactly that matters is anyones guess, and I can't find any information on this issue. It seems that the width and height attributes work for the default state of the box, but gets thrown out while rendering the transition between the initial and alternate state.

最佳解决方案可能是：

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的较早版本（如果您支持它们），然后添加显式的高度和宽度以获取您想要的样式：

You can also use a conditional comment to target older versions of IE (if you support them) and then add explicit height and width to get the style you're looking for:

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

这篇关于在Safari中选中复选框后，为什么复选框会移动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！