样式为按钮的链接因绝对或相对定位而失败 *

Question

在 web_application 中，当用户单击“添加”和“删除”按钮时，IE 9 可以工作，但 Safari 5.1 无法工作。

关于添加/删除按钮：

我注意到在 Safari 中，只有当光标放在按钮的顶部时，按钮才会响应...我注意到这与它在正常布局中的定位量有关。

当然，当我删除定位时它就起作用了。接下来我尝试从相对定位切换到绝对定位，但奇怪的是遇到了同样的问题。

解决这个问题的方法是什么，我需要定位元素，但我也需要它工作。我有下面的绝对定位。

  <form id="f3" method="post">
    <fieldset>
      <input class="te3" type="text" name="f3a" id="f3aa" maxlength="30"/>
      <span id="f3a">title:</span>
      <br>
      <input class="te3" type="text" name="f3b" id="f3bb" maxlength="2048"/>
      <span id="f3b">url:</span>
      <a id="f3c" class='but' href="javascript:void(0)">Add</a>
      <a id="f3d" class='but' href="javascript:void(0)">Delete</a>
    </fieldset>
  </form>

.but
  {
  margin-top:5px;
  font-family:"Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif;
  text-decoration:none;
  font-size:14px!important;
  line-height:16px;
  padding:2px 2px;
  cursor:pointer;
  border:1px solid #bbb;
  color:#464646;
  outline:none;
  text-decoration:none;
  background:#f2f2f2 url(white-grad_1.png) repeat-x scroll left top;
  }
.but:hover
  {
  text-decoration:none;
  color:#000;
  border-color:#666;
  }
.but:active
  {
  text-decoration:none;
  background:#eee url(white-grad-active_1.png) repeat-x scroll left top;
  }


#f3c
  {
  position:absolute;
  bottom:-3px;
  left:262px;
  }
#f3d
  {  
  position:absolute;
  bottom:-3px;
  left:300px;
  }

Answer 1

无论出于何种原因，Safari 处理 z 索引的方式与 IE 不同。有一个隐藏的 div 阻止了我的链接的一部分。我应该用更直观的方式来思考，而不是想知道代码出了什么问题……并且让我的 div 更整洁。阻塞 div 不需要在那里。

只需将按钮上的 z-index 设置为 30 即可解决该问题。