Chrome和Firefox的顯示塊，而不是內聯

我有一堆鏈接前面的圖像。我無法使用列表，因爲不同鏈接的圖片不同。它看起來像我想要在IE中，但由於某種原因，Chrome和Firefox在圖像和鏈接之間放了一條線。（添加爲清楚起見換行符）Chrome和Firefox的顯示塊，而不是內聯

<img src='/Images/newsicon.png' 
style='width:12px; 
     height:12px; 
     border:0px none white; 
     visibility:visible; 
     display:inline; 
     padding: 0px;' 
title='Read Article' alt='Read Article' /> <a href='Link'>Text</a>

當我使用檢查元素鉻我得到這個作爲風格的元素列表：

width: 12px; 
height: 12px; 
border-top-width: 0px; 
border-right-width: 0px; 
border-bottom-width: 0px; 
border-left-width: 0px; 
border-top-style: none; 
border-right-style: none; 
border-bottom-style: none; 
border-left-style: none; 
border-top-color: white; 
border-right-color: white; 
border-bottom-color: white; 
border-left-color: white; 
padding-top: 0px; 
padding-right: 0px; 
padding-bottom: 0px; 
padding-left: 0px; 
visibility: visible; 
display: block; 
opacity: 1;

我猜想這可能是也發生在FF。不知道我做錯了什麼。

來源

2011-06-10 AndyD273

好的，所以我們有一個名爲PrettyPhoto的jQuery applet，它顯然是將顯示設置爲阻止。不知道爲什麼它不這樣做到IE ...當我禁用PrettyPhoto腳本導入它正確顯示它。現在我必須仔細研究如何讓它忽略一些圖像，或者至少不要改變內聯來阻止。 – AndyD273 2011-06-10 17:44:16

你對IE和其他瀏覽器有單獨的樣式表嗎？對我來說聽起來是有一個更重要的風格覆蓋顯示：內聯。

來源

2011-06-10 17:06:37 William

是的。有一個jQuery腳本將圖片預加載並使其淡入。我討厭它，但我們的平面設計師堅持要保持它......我走進去，從'images ='中刪除'，display：'block''部分。 $（'img'，this）.css（{opacity：0，visibility：'visible'，display：'block'}），'現在看起來又好了...... – AndyD273 2011-06-10 18:03:53

img必須顯示：block才能正常工作，這就是爲什麼瀏覽器最有可能覆蓋它的原因。爲了得到理想的效果，使用：

display: inline-block;

來源

2011-06-10 17:12:42

Chrome和Firefox的顯示塊，而不是內聯

回答

相關問題