Как я могу заставить одного персонажа одинаково центрироваться во всех браузерах и операционных системах?

Я использую CSS3 границы радиуса, чтобы создать круглые кнопки на этом сайте:Как я могу заставить одного персонажа одинаково центрироваться во всех браузерах и операционных системах?

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, даже если указаны высота линии и размер шрифта. Я в порядке с решением, которое включает ручное позиционирование символа внутри кнопки, но я попытался и вручную сосредоточиться на одной ОС, что отрицательно сказывается на других.

источник

2010-01-26 vamin

Одно примечание, положение: фиксированное; не поддерживается IE6. Я бы не сосредоточился на этом, потому что люди, использующие ваш сайт, наверняка будут иметь Firefox или Safari (веб-разработчики и графические художники). – orokusaki

Я нашел проблему. Шрифт на исходной странице объявлен как «Helvetica, sans-serif». В Windows нет Helvetica, поэтому это рендеринг в Arial. Все браузеры Mac обрабатываются в Helvetica, поэтому возникают проблемы с рендерингом. Проблема с «Arial, sans-serif» устраняет проблему.

источник

2010-01-30 20:05:21 vamin

эм,

div {text-align: center;}

я быть что-то здесь не хватает ...

В качестве альтернативы, вы можете обернуть <a> теги в <p> теги и установить text-align: center на <p> теге.

EDIT

После дальнейшего рассмотрения вашей страницы, то кажется, что Вы пытаетесь центрировать то, что абсолютно позиционирован. Это сложно. Убедитесь, что вы не объявляете свой тег <a> как display:block, и вы можете его центрировать, потому что по умолчанию значения <a>.

EDIT 2

После дальнейшего дальнейшего рассмотрения, все, что вам нужно сделать, это установить #help правило left: 50% и избавиться от right правила. Это будет очень удобно, даже если он абсолютно позиционирован :)

источник

2010-01-26 02:17:46 Jason

Я думаю, что ты на правильном пути.Центрируйте текст на 'div', а не тег' a', как он сейчас. –

Я попробую это, но это не повлияет на вертикальное позиционирование. Я в порядке с настройкой полей вручную, чтобы все выглядело в центре, но я не понял способ сделать это, который отображает то же самое в Windows, OS X и Linux. EDIT - Применение выравнивания текста: от центра к содержащимся divs не оказывает никакого влияния. – vamin

Как бы вы хотели, чтобы элементы были вертикально расположены? все, что вы упомянули, было сосредоточено ... – Jason

Как я могу заставить одного персонажа одинаково центрироваться во всех браузерах и операционных системах?

ответ

Смежные вопросы