Question

我设计了一个带有chrome选项的表单，它也可以在fireworks，webkit nightly build和IE10以及内置的coda浏览器中正常工作。我在safari中发现了一个奇怪的错误。通过加载预先检查的选项，它看起来像这样： View as in all webkit browsers and safari before changing option

选择“pro”选项后，奇怪的是只改变了一半标签background-color和text-color，这只发生在safari中： Safari after selecting another option

如果不隐藏input =“option”字段，它就会呈现正常。

但是，我不想显示选项输入本身，而只显示标签。

我尝试了所有的东西，从display：none，到绝对开箱即用，可见性：隐藏，像Option-width和高度到0px等等，等等。

是否有人碰巧碰到了这个并找到了解决方案或解决方法？

当前的HTML代码如下所示：

<div id="modules">
<fieldset class="pd3m gr group_modul">
<div class="g3 option">
<input id="Customer_modul_basic" value="basic" checked="checked" type="radio" name="Customer[modul]" />
<label for="Customer_modul_basic">Basic</label><div class="sub">

当前的CSS：

.option label {
  border-bottom: 1px solid grey;
  display: block;
  padding: 7px 15px 4px;
  font-size: 20px;
  line-height: 32px;
}

.option input[type="radio"] {
  display: none;
}

.option input[type="radio"]:checked + label {
  background: #b8c102;
  -webkit-box-shadow: 0px 4px 0px 0px #888f01;
  -moz-box-shadow: 0px 4px 0px 0px #888f01;
  box-shadow: 0px 4px 0px 0px #888f01;
  border-bottom: 1px solid #888f01;
  color: white;
  text-shadow: 0px 4px 0px #888f01;

编辑，解决此案例：我能够避免这个错误。似乎Safari在这个特定用例中遇到了“transition：all”的问题。在指定转换中应包含哪些属性并删除“all”后，它可以正常工作。我想这应该适用于大多数情况，必须有一个属性，在这种情况下会导致转换问题，我不能说。

如果有人遇到同样的问题，请在转换中准确指定您想要的内容。

Safari选项错误会抑制标签

0 个答案: