Question

I'm having an issue where an <a> element that is being used as a container is behaving differently in Safari than in Chrome and FF, wondering if anyone has any suggestions as to how to fix this... in a nutshell, the <a> element contains two child elements that have a little bit of margin space between them - in Chrome and FF, clicking anywhere on the <a> triggers a .click() event (as it should), while in Safari, the event is only triggered when clicking on the children - clicking the margin space in between the two children does not trigger the script, and hovering over that space does not change the cursor to the familiar 'hand' icon.

Here's an outline of what's going on:

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!")
})

To summarize, the desired behavior is that clicking anywhere on the <a> should trigger the alert script, and this works in Chrome ad FF. In Safari, the small margin (set in .i-space--right) is inactive - clicking here does not run the script, and it is as though Safari doesn't recognize the little space as being a part of the <a> - I tried setting cursor: pointer, but to no avail.

Any thoughts on how I can get uniform behavior across these three browsers? Thank you.

Answer 1

正如评论中所述，问题似乎与display标记上的<a>属性相关：

$('#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渲染会将边距忽略为元素的空间，将display更改为内嵌块会消除此行为：

$('#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 - cross-browser issue with <a> child elements

1 个答案: