每個主要瀏覽器的外觀不同

更新我實現了CSS重置並且無濟於事。 Kejko的回答也沒有幫助，反而變得更糟。（Chrome現在顯示它不正確的樣式更改）每個主要瀏覽器的外觀不同

這可能是問題，因爲我知道實際的表不能定位相對？

.chatIcons { 
    display: table; 
}

末更新

我正要有我的網站去住後，我測試的每個頁面如何看待的主流瀏覽器，並遇到了一個問題。這個問題似乎與圖標的懸停效果有關。

在鉻圖標部分顯示完全如何我想要它。

在火狐它出現相同的，但一旦一個它懸停它僅影響滯留相對於親本的第三圖標和.iconInfo的覆蓋，代替它做的主要母體的100％的寬度和高度容器。

在IE 10-11它使一切正確的，但一旦它徘徊在「疊加」是不是100％的高度了，高度實際上變化。

這裏是CSS屬於懸停：

.iconInfo { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0, 0, 0, 0.2); 
    text-align: center; 
    opacity: 0; 
    transition: opacity 0.6s ease; 
    -webkit-transition: opacity 0.6s ease; 
    -moz-transition: opacity 0.6s ease; 
} 

.icon:hover .iconInfo { 
    opacity: 1; 
}

我已經包括小提琴，幫助，Demo

來源

2014-02-19 Josh Powell

只是爲了記錄，你使用的東西像css reset oder normalize.css？ – Johnny000

@ Johnny000我不這樣做，你認爲這是一些默認樣式造成這種情況嗎？ –

IE bug對我來說聽起來像是可能與默認樣式有關的東西.. – Johnny000

-2

試試這個：

.icon {
邊界半徑：5像素;
display：inline-block;
padding：15px 0;
位置：相對;
vertical-align：middle;
寬度：32.99％;
}

這應該解決您的問題。

來源

2014-02-19 15:21:10 Kejko

你測試了嗎？因爲它不起作用，甚至使鉻現在顯示錯誤。 –

每個主要瀏覽器的外觀不同

回答

相關問題