Question

更新我实施了CSS重置，但无济于事。 Kejko的答案也没有帮助，反而使情况变得更糟。（Chrome现在显示不正确的样式更改）

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

.chatIcons {
    display: table;
}

结束更新

在测试每个页面在主要浏览器上的显示方式并遇到问题后，我的网站即将上线。这个问题似乎与图标的悬停效果有关。

在Chrome 中，图标部分正好显示我想要的方式。

在FireFox中它看起来是一样的但是一旦它被徘徊，它只影响第三个图标和.iconInfo的叠加层相对于父级而言，而不是它主父容器的％宽度和高度。

在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

Answer 1

试试这个：

.icon {
    border-radius：5px;
    显示：内联块;
    填充：15px 0;
    职位：亲属;
    vertical-align：middle;
    宽度：32.99％;
}

那应该解决你的问题。

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

1 个答案: