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

时间:2011-09-01 19:17:55

标签: css internet-explorer safari

在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;
  }

1 个答案:

答案 0 :(得分:0)

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

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