Question

无法在此处找到样式菜单的正确值：http://demo.imatte.us/fomru/landingpage.html

屏幕：i.imgur.com/iCBbIpP.png

只是在safari，mac os。

另外，还有另外一个问题。当我在第一个下拉菜单中选择一些元素时，所有面板都会弹跳一段时间。想想这是因为这个菜单中的1个元素有一个样式，而所有其他元素都有另一个样式。

屏幕：i.imgur.com/Bk5mbpF.png

请有人帮助我找到正确的CSS样式。

Answer 1

对于第一个下拉菜单的问题：它的弹跳是因为.filter-elements .element-all的高度比其他图像低2 px。我刚刚将高度从22px改为24px并且它不再反弹。因为图像会被缩放到不合适的位置，我建议只是将边距增加2px：

.filter-elements .element-all
{
  background: none repeat scroll 0 0 #e41b47;
  box-shadow: 7px 8px #9bb3c8, 16px 0 #0c66bb, 7px -8px #85b560;
  height: 22px;
  margin: 8px 18px 8px 5px;
  transition: all 0.5s ease-out 0s;
  width: 22px;
}

改为

.filter-elements .element-all
{
  background: none repeat scroll 0 0 #e41b47;
  box-shadow: 7px 8px #9bb3c8, 16px 0 #0c66bb, 7px -8px #85b560;
  height: 22px;
  margin: 8px 18px 10px 5px;  // <-- increased margin here
  transition: all 0.5s ease-out 0s;
  width: 22px;
}

关于Mac Safari的问题 - 由于我没有Mac，我无法正常测试，但我认为这是一个带有负余量的问题。组。 Safari的一些已知问题（不知道它们是否已经修复）对于具有位置：相对和负边距的元素 - Stackoverflow: Negative margin has different results on Mac Safari。您可以尝试将position:absolute .filters .filter-name:after更改为position:relative以解决垂直对齐的Safari问题，但是您必须注意一些跟进css调整，因为这样会影响水平定位。

Css-styles safari问题（mac os）

1 个答案: