为什么我的关闭按钮在某些浏览器中摇摆？

请结帐演示在 - http://jsfiddle.net/cYGzC/为什么我的关闭按钮在某些浏览器中摇摆？

想法是在悬停十字（'×'）将围绕其中心，这将提供一个很好的空转旋转议案。问题是，为了这个很好地工作，×的中心和圆的中心必须重合。

.close_button { 
    background-color: #3b3b3b; 
    width: 40px; 
    height: 40px; 
    border-radius: 20px; 
    box-shadow: 0 0 5px rgba(150,150,150,0.9); 
    color: #fff; 
    font-size: 40px; 
    line-height: 40px; 
    text-align: center; 
    transition-duration: 2s; 
    -webkit-transition-duration: 2s; 
    -moz-transition-duration: 2s; 
    -o-transition-duration: 2s; 
    cursor: pointer; 
}

上面的CSS欺骗似乎在许多浏览器中，除了Windows中的Chrome浏览器。（Mac Chrome似乎正常工作。）

来源

2013-04-12 AppleGrew

Chrome在windows中对我来说工作正常。 – Daedalus

对于我来说，它也适用于Chrome，但在最新版本的Firefox中，它移动了一个像素，然后旋转使其脱离中心 –

对于我来说，它在Chrome for Windows中非常明显地摇摆不定。也许字体或其他因素在这里玩。 – AppleGrew

更好的工作，简短的回答是用图片为您的交叉。正如Taras所说，不能保证字体在每个浏览器中都能完全呈现。

来源

2013-04-12 08:41:28

太糟糕了，有人低估了这一点; +1为正确答案 –

@ alex-shesterov仇恨者会讨厌！ –

感到伤心，但我想这是唯一正确的答案。 – AppleGrew

它看起来像font-family它导致部分问题。如果使font-family:Arial, Helvetica, sans-serif;它似乎在Firefox

http://jsfiddle.net/cYGzC/1/

来源

2013-04-12 08:38:55 Andrew

这对WinXP的FF来说更糟糕。：P所以我想用背景图片是唯一可行的方法。 – AppleGrew

不完美集中在mac os上：http://d.pr/i/znxT top/right bravedick

我承认使用Arial不会使X完美居中，但会阻止初始跳跃。然而，当你看到它在铬中跳过中心比Firefox更多。我认为每个浏览器在字体浏览器中显示字体的方式都不同，这是最大的问题。是否有重置字体的方法，因此在每个浏览器中都完全相同？ – Andrew

为什么我的关闭按钮在某些浏览器中摇摆？

回答

相关问题