Я использую CSS3 border-radius для создания круглых кнопок на этом сайте:
http://hexpreview.com/
Однако из-за различий в отрисовке шрифтов между Mac и Windows (не между браузерами) центрирование текста кнопки внутри ограничивающего круга является непоследовательным. Кнопки отображаются правильно во всех браузерах с поддержкой CSS3 в Windows, но не в OS X или Linux.
Вот более простой код, который несколько воспроизводит проблему:
<html>
<head>
<title>Rounded Buttons Example</title>
<style type='text/css'>
div {padding:1em; margin:1em}
a {text-decoration:none; color:#000;}
#help_link, #add_link {
display:block;
height: 1.4em;
width: 1.4em;
text-align:center;
line-height: 1.4;
font-size:1.5em;
padding:0;
border:.1em solid #000;
-moz-border-radius:.8em;
-webkit-border-radius:.8em;
border-radius:.8em;
}
#help_link:hover, #add_link:hover {
border-width:.15em;
margin:-.05em;
-moz-border-radius:.85em;
-webkit-border-radius:.85em;
border-radius:.85em;
}
</style>
</head>
<body>
<div>
<a id='help_link' href='#'>?</a>
</div>
<div>
<a id='add_link' href='#'>+</a>
</div>
</body>
</html>
Я боролся с этим некоторое время, и это начинает становиться грязным. Если бы это была проблема, связанная со спецификацией CSS3, я бы, вероятно, отпустил ее, но мне кажется, что это проблема межбраузерного шрифта (центрирование также не работает в квадратных кнопках) Есть идеи?
EDIT
Я хотел бы уточнить, что я хочу, чтобы кнопки находились точно в центре круглой границы. Основная проблема - вертикальное центрирование из-за разницы в высоте шрифта в OS X и Windows, даже если указаны высота строки и размер шрифта. Я согласен с решением, которое включает ручное позиционирование символа внутри кнопки, но я пробовал, и ручное центрирование на одной ОС отрицательно сказывается на других.