html - 每个主要浏览器上的外观不同

Question

更新 我实现了 CSS 重置但无济于事。 Kejko 的回答也没有帮助，反而使情况变得更糟。 (Chrome 现在会随着样式的变化显示不正确)

这可能是问题所在，因为我知道实际表格不能相对定位？

.chatIcons {
    display: table;
}

结束更新

在我测试了每个页面在主要浏览器上的显示效果并遇到问题后，我正准备让我的网站上线。问题似乎与图标的悬停效果有关。

在 chrome 中，图标部分完全符合我的要求。

在 FireFox 中，它看起来是一样的，但是一旦它被悬停，它只会影响第三个图标和 .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;
}

我提供了一个 fiddle 来帮助，Demo

Answer 1

试试这个:

.icon {
边框半径:5px；
显示:内联 block ；
内边距:15px 0;
position:relative；
垂直对齐:中间；
宽度:32.99%；

这应该可以解决您的问题。