кнопка теряет округление границ по умолчанию в IE и Firefox при изменении стиля рамки, но отлично работает в Opera, Chrome и Safari - PullRequest
Новая
       19

кнопка теряет округление границ по умолчанию в IE и Firefox при изменении стиля рамки, но отлично работает в Opera, Chrome и Safari

1 голос
/ 25 января 2012 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

<style type="text/css">
input {
  border-width: 2px; /* causes button to change dramatically in IE and FireFox */
}

</style>

</head>
<body>
<input type="button" value="Print"/>
</body>
</html>

Если я позволю каждому браузеру отображать кнопку без каких-либо стилей, все они будут выглядеть примерно так:

Default Button in IE

Например, в IE 8 ширина границы по умолчанию составляет 2 пикселя. Я добавил стиль для кнопки, которая устанавливает ширину границы в 2 пикселя. Итак, я не изменил ширину границы вообще. Однако после перезагрузки страницы кнопка теперь выглядит так:

Same Button in IE but with stylesheet

Я совсем не понимаю. Я посмотрел на панель инструментов разработчика, инструмент разработчика Dev, Firebug, инструмент разработки Safari и проанализировал каждую кнопку. Почему FireFox и IE вызывают столь резкое изменение кнопки, в то время как Safari, Chrome и Opera сохраняют внешний вид и ощущения одинаково? Я не понимаю, почему кнопка меняет цвет, теряет округление и становится квадратной.

Я даже добавил ссылку сброса YUI, которую я видел повсюду, исследуя эту проблему, и это не помогло.

Что я делаю не так?

Я просто хочу, чтобы границы, отступы и поля кнопки были одинаковыми во всех браузерах, чтобы они выглядели одинаково, сохраняя при этом внешний вид кнопки по умолчанию (Default Button in IE), но IE и FireFox затрудняют это на данный момент.

Спасибо.

Ответы [ 2 ]

2 голосов
/ 25 января 2012

Это просто разница в том, как браузеры отображают кнопки.Вы не делаете ничего плохого;это просто проблема кросс-браузерного рендеринга.Само по себе вы не можете заставить их одинаково отображать графику кнопок по умолчанию.

Если вы хотите, чтобы ваши кнопки выглядели одинаково во всех браузерах, я советую вам создавать их с помощьюCSS.Это больше кода, но он дает вам точное управление, которое вы ищете.

Есть несколько превосходных создателей кнопок CSS.Вот один.

http://css -tricks.com / examples / ButtonMaker /

HTH!

0 голосов
/ 29 августа 2012

Установка границы на none у меня не сработала (в IE9 / IE10): 

border: none;

Установка на ноль (т.е. border :;) также сработала.

...