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>子元素

回答

相關問題