Safari选项错误会抑制标签

时间:2013-02-01 11:25:36

标签: input safari label option

我设计了一个带有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”后,它可以正常工作。我想这应该适用于大多数情况,必须有一个属性,在这种情况下会导致转换问题,我不能说。

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

0 个答案:

没有答案