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

Chrome 和IE9 邊框抑制技術

刪除Chrome 和IE9 中圖像周圍持續存在的難看邊框可能是一項令人沮喪的任務。儘管將邊框屬性設為“無”，但這些瀏覽器仍然頑固地保持細線。

潛在原因與解決方案：

• Chrome Bug： Chrome 會忽略「border:none;具有特定尺寸的圖像。為了避免這種情況，請透過分配零寬度和高度，再加上精確的填充值來適應所需的圖像大小，欺騙 Chrome 感知不存在圖像。
• IE9 行為： IE9 新增像素 -按一下影像時，影像周圍的選取邊框會變細。若要消除此問題，請停用“使用者選擇”屬性。

範例實作：

Chrome Bug 的CSS：

<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：

<code class="css">img {
    -ms-user-select:none;
    user-select:none;
}</code>

其他提示：

• 確保影像未包含在任何其他有邊框的元素中。
• 檢查可能影響邊框外觀的供應商前綴。
• 嘗試暫時停用硬體加速，看看它是否會影響邊框行為。

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