Стиль CSS Firefox / Safari / Chrome - PullRequest
Новая
       7

Стиль CSS Firefox / Safari / Chrome

5 голосов
/ 31 мая 2010

У меня проблема с различиями CSS между браузерами. У меня есть простое поле ввода текста и кнопку отправки. должно быть организовано. с webkit (safari / webkit) все выглядит хорошо, но Firefox этого не делает. у кого-нибудь есть идея, что не так?

Я написал небольшую тестовую HTML-страницу: 

<html>
<head>
<style type="text/css">

#input {
    background: none repeat scroll 0 0 white;
    border-color: #DCDCDC;
    border-style: solid;
    border-width: 1px 0 1px 1px;
    font: 13px "Lucida Grande",Arial,Sans-serif;
    margin: 0;
    padding: 5px 5px 5px 15px;
    width: 220px;
    outline-width: 0;
 height: 30px;
}

#submit {
    background: none repeat scroll 0 0 white;
    border: 1px solid #DCDCDC;
    font: 13px "Lucida Grande",Arial,Sans-serif;
    margin: 0;
    outline-width: 0;
 height: 30px;
    padding: 5px 10px;
}

</style>
</head>
<body>
<input id="input" type="text" value="" /><input id="submit" type="button" value="Add" />
</body>
</html>

Ответы [ 6 ]

1 голос
/ 31 мая 2010

Что вы пытаетесь сделать с фоном коробки? Это выглядит действительно сложно, если у вас просто белый фон, если это так, и в этом случае ваша страница может быть упрощена до следующего: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/reset/reset-min.css">
<style type="text/css">
#input, #submit {
    background-color: #fff;
    border: 1px solid #DCDCDC;
}
</style>
</head>
<body>
<input id="input" type="text" value="" /><input id="submit" type="button" value="Add" />
</body>
</html>
1 голос
/ 31 мая 2010

Вы не используете Doctype, поэтому браузеры возвращаются в режим quirks :

В режиме Quirks браузеры нарушать современный веб-формат технические характеристики во избежание «Ломающиеся» страницы, созданные в соответствии с практики, которые были распространены в конец 1990-х годов. Различные браузеры реализовать разные причуды. В Internet Explorer 6, 7 и 8, Причудливый режим эффективно заморожен IE 5.5. В других браузерах режим Quirks представляет собой несколько отклонений от режим Почти Стандарты.

0 голосов
/ 17 октября 2010

Я обнаружил, что установка значения свойств высоты и ширины для тега ввода исправляет разницу между браузерами.

0 голосов
/ 02 июня 2010

У меня сейчас рабочая версия! спасибо за вашу помощь! 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <style type="text/css">
     input {
      background-color: #fff;
      border: 1px solid #dcdcdc;
      font: 13px "Lucida Grande", Arial, sans-serif;
      margin: 0;
      outline: none;
     }

     input#input {
      border-right-width: 0;
      padding: 5px 5px 5px 15px;
      width: 220px;
     }

     input#submit {
      padding: 4px 10px;
     }
     </style>
    </head>
    <body>
     <input id="input" type="text" value="" /><input id="submit" type="button" value="Add" />
    </body>
    </html>
0 голосов
/ 31 мая 2010

Спасибо за вашу информацию, но у меня те же проблемы: (

Я также немного упростил это: 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/reset/reset-min.css">
<style type="text/css">

#input {
    background: none repeat scroll 0 0 white;
    border: 1px solid #DCDCDC;
}

#submit {
    background: none repeat scroll 0 0 white;
    border: 1px solid #DCDCDC;
}

</style>
</head>
<body>
<input id="input" type="text" value="" /><input id="submit" type="button" value="Add" />
</body>
</html>
0 голосов
/ 31 мая 2010

После добавления вашего правильного DOCTYPE: также внедрите CSS-файл YUI (R) eset, который стандартизирует браузер основных отличий CSS, как правило, отличается.

http://developer.yahoo.com/yui/reset/

Это даст вам то, что мы называем «чистым списком». После того, как вы импортировали YUI (R), вы должны определить свои значения по умолчанию, такие как padding, margin, a, img и т. Д., А затем продолжить строить свой собственный. дизайн.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...