html - Safari - 子元素的跨浏览器问题

Question

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

这是正在发生的事情的概要:

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 无法将小空间识别为 <a> 的一部分一样- 我尝试设置 cursor: pointer ，但无济于事。

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

Answer 1

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

$('#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>

---

也许是 inline在 Safari 上渲染会忽略作为元素空间的边距，从而更改 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>

---