CODEWITHSUNDEEP
htmlcsssafaricross-browser
skwidbreth
skwidbreth

Reputation: 8454

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

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.

Upvotes: 1

Views: 113

Answers (1)

DaniP
DaniP

Reputation: 38262

As stated on the comments the problem seems to be related with the display property on the <a> tag:

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

Maybe the inline render on Safari ignores the margin as space of the element, changing the display to inline-block removes this behavior:

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

Upvotes: 1

Related Questions