Safari

Question

我遇到一个问题，其中用作容器的 <a> 元素在 Safari 中的行为与在 Chrome 和 FF 中的行为不同，想知道是否有人对如何做有任何建议要解决此问题...简而言之，<a> 元素包含两个子元素，它们之间有一点边距 space - 在 Chrome 和 FF 中，单击 <a> 触发一个 .click() 事件（应该如此），而在 Safari 中，该事件仅在单击子项时触发 - 单击两个子项之间的边距 space 不会触发脚本，并将鼠标悬停在 space 上不会将光标更改为熟悉的 'hand' 图标。

这里概述了正在发生的事情：

HTML

<a class='container' id='container-previous' href='#'>
    <i class='i-vb-angle-double-left i-space--right'></i>
    <span>Previous</span>
</a>

CSS

.container {
    display: inline;
}

.i-space--right {
    margin-right: 5px
}

JS

$('#container-previous').click(function(){
  alert("success!")
})

总而言之，所需的行为是单击 <a> 上的任意位置应触发警报脚本，这在 Chrome 广告 FF 中有效。在 Safari 中，小边距（在 .i-space--right 中设置）处于非活动状态 - 单击此处不会运行脚本，就好像 Safari 无法将小边距 space 识别为<a> 的一部分 - 我尝试设置 cursor: pointer，但无济于事。

关于如何在这三种浏览器中获得统一的行为有什么想法吗？谢谢。

Answer 1

如评论所述，问题似乎与 <a> 标签上的 display 属性有关：

$('#container-previous').click(function() {
  alert("success!")
})

.container {
  display: inline;
}
.i-space--right {
  margin-right: 15px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class='container' id='container-previous' href='#'>
  <i class='i-vb-angle-double-left i-space--right'>i</i>
  <span>Previous</span>
</a>

可能 Safari 上的 inline 渲染忽略了元素的 space 边距，将 display 更改为 inline-block 删除此行为：

$('#container-previous').click(function() {
  alert("success!")
})

.container {
  display: inline-block;
}
.i-space--right {
  margin-right: 15px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class='container' id='container-previous' href='#'>
  <i class='i-vb-angle-double-left i-space--right'>i</i>
  <span>Previous</span>
</a>

Safari - <a> 子元素的跨浏览器问题

Safari - cross-browser issue with <a> child elements

html

css

cross-browser