Css风格狩猎版(mac os)

Question

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

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

• 只是在野外旅行，麦克·奥斯。

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

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

拜托，有人，帮我找到合适的css样式。

Answer 1

对于第一个下拉菜单的问题:它是弹跳的，因为.filter-elements .element-all的高度比其他图像低2px。我刚把高度从22‘t改为24’t，它不再反弹了。因为图像将在那时进行缩放，所以我建议将边际底部增加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的问题--因为我这里没有Mac，所以我无法正确地测试，但我想这是一个设置为负值的问题。对于具有位置的元素，Safari (不知道它们是否已经修复)存在一些已知的问题:相对的和负的裕度- Stackoverflow: Negative margin has different results on Mac Safari。如果将position:absolute for .filters .filter-name:after改为position:relative可以解决垂直对齐的Safari问题，那么您可以尝试一下，但是您必须注意一些后续的css调整，因为这会影响水平定位。