我有一系列的值,在
page上预先选中了复选框.除了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>
如何设置复选框的样式以使其处于静止状态,并且仅在单击时更改状态？
解决方法
问题是宽度和高度属性.究竟重要的是任何人猜测,我找不到有关此问题的任何信息.似乎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]-->
