為什麼我的圖像在 Chrome 中仍然有邊框，即使有「border: none;」？

在Chrome 中刪除影像邊框

在Chrome 和IE9 中處理影像時遇到的一個常見問題是出現持久的細邊框儘管指定了“輪廓：無；”，但仍圍繞圖像和“邊框：無；”在CSS 中。要解決這個問題，請考慮以下方法：

Chrome 錯誤規避

Chrome 存在已知錯誤，錯誤會忽略「border: none;」風格。要解決此問題，請使用以下CSS id 區塊建立一個具有所需填充的透明區域，有效地欺騙Chrome 認為沒有圖像：

<code class="css">#dlbutn {
    display: block;
    width: 0px;
    height: 0px;
    outline: none;
    padding: 43px 51px 43px 51px;
    margin: 0 auto 5px auto;
    background-image: url(/images/download-button-102x86.png);
    background-repeat: no-repeat;
}</code>

樣式重複

另一個解決方案是在CSS 中以及透過jQuery 的border=0 屬性複製邊框和輪廓刪除樣式。這種冗餘方法有時會強制瀏覽器正確套用樣式。

<code class="css">img, a img {
    outline: none;
    border: none;
}</code>

<code class="js">$(document).ready(function(){
    $('img').attr('border', '0');
});</code>

其他注意事項

確保影像檔案的尺寸與CSS 中指定的寬度和高度。如果存在差異，瀏覽器可能會新增邊框進行補償。

透過實作這些解決方案，您可以有效刪除 Chrome 和 IE9 中不需要的圖像邊框，為您的網頁提供一致且視覺上令人愉悅的外觀.

以上是為什麼我的圖像在 Chrome 中仍然有邊框，即使有「border: none;」？的詳細內容。更多資訊請關注PHP中文網其他相關文章！