更新 我实现了 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
最佳答案
试试这个:
.icon {
边框半径:5px;
显示:内联 block ;
内边距:15px 0;
position:relative;
垂直对齐:中间;
宽度:32.99%;
这应该可以解决您的问题。
关于html - 每个主要浏览器上的外观不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21884482/