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

我遇到一个问题，其中一个用作容器的<a>元素在Safari中的行为与Chrome和FF中的行为不同，想知道是否有人对如何使用为了解决这个问题......简而言之，<a>元素包含两个子元素，它们之间有一点点的空白空间 - 在Chrome和FF中，点击<a>上的任意位置会触发.click()事件（因为它应该），而Safari浏览器只会在点击儿童时触发事件 - 单击两个孩子之间的空白边界不会触发脚本，并且悬停在该空间上不会将光标更改为熟悉的“手形”图标。Safari浏览器与跨浏览器问题<a>子元素

这里是发生了什么事情的轮廓：

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 
}

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

总之，所需的行为是点击任何地方上<a>应该触发警报脚本，并且这可以在Chrome ad FF中使用。在Safari中，小边距（在.i-space--right中设置）处于非活动状态 - 单击此处不会运行该脚本，并且仿佛Safari不会将该小空间识别为<a>的一部分 - 我尝试设置cursor: pointer，但是徒劳无功。

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

来源

2017-04-06 skwidbreth

似乎涉及到的事实，你是你设定了''标签作为内联元素将其更改为inline-block的或块解决问题...可能与内联元素中的内容如何填充空间相关 – DaniP

With inline https://jsfiddle.net/rdogpfsL/ ----并且在块内https://jsfiddle.net/rdogpfsL/1/ – DaniP

@DaniP - 是的，必须将它设置为内联块。你能回答这个问题吗？我可以接受吗？ – skwidbreth

由于在注释中规定的问题似乎与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>

也许inline渲染上Safari浏览器忽略保证金为元素的空间，将display更改为i n线段块移除此行为：

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

来源

2017-04-06 17:44:53 DaniP

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

回答

相关问题