Chrome и IE9 не центрируют текст на кнопке - PullRequest
Новая
       15

Chrome и IE9 не центрируют текст на кнопке

2 голосов
/ 27 марта 2012

Я использую таблицу стилей YUI3 для сброса и PT Sans из веб-шрифта Google.

Я сократил свой тестовый пример до: 

<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.5.0pr4/build/cssreset/cssreset-min.css">

<ul>
  <li>
    <input type="submit" value="Create Role" name="submit" id="submit">
 </li>
</ul>

И стили: 

input[type=submit]{
  background: #000000;
  font: 13px 'PT Sans', sans-serif;
  margin-left: 15px;
  padding-bottom: 5px;
  height: 38px;
  color: #FFFFFF;
  border: 0;
  width: auto;
}

Я тестировал только в IE9, Chrome 17 и Firefox 11. В Firefox текст находится в центре кнопки, но в Chrome и IE текст не в центре.

Вот здесь: http://jsfiddle.net/Gx79V/6/

И изображение для сравнения:

enter image description here

Из-за этого кнопки выглядят довольно непрофессионально в хроме.Как это можно исправить?

Ответы [ 2 ]

1 голос
/ 14 апреля 2012

Решил проблему с помощью этого: 

//Remove paddings
input, button{
  padding: 0;
}

//Remove for mozilla
input::-moz-focus-inner {
  border:0;
  padding: 0;
}
0 голосов
/ 27 марта 2012

это здесь отлично работает в хроме, то есть я только что удалил нижнюю часть отступа

...