CSS Стиль Firefox/Safari/Chrome

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

я написал небольшой тест 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>

источник

2010-05-30 patrick

Что относительно IE и Opera? Нехорошо пропустить это тестирование, особенно для IE. – Manius

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

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

источник

2010-05-30 20:56:46

После добавления правильного DOCTYPE: также осуществлять YUI (R) C ведьму ES File будет стандартизирован Основным отличие CSS браузер, как правило, имеет разные.

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

Это даст вам то, что мы называем «чистого листа», После того, как вы импортировали YUI (R) Вы должны определить свои значения CSS DEFUALT, такие как обивка, края, а, IMG и т.д. вашей собственной личности и затем продолжайте строить свой дизайн.

источник

2010-05-30 21:06:56 RobertPitt

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

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

<!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>

источник

2010-05-31 06:00:32 Patrick

Это не действительный doctype, попробуйте что-то вроде –

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

<!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>

источник

2010-05-31 19:14:57

благодарит за информацию. но проблема также здесь: светлячок Dont выравнивать входные элементы: На Webkit (Safari/Chrome) http://img534.imageshack.us/img534/7320/safariw.png На Firefox HTTP: //img706.imageshack.us/img706/1109/firefoxo.png – patrick

Вы пытались установить, чтобы их высота была одинаковой? –

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

<!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>

источник

2010-06-01 21:13:49 Patrick

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

источник

2010-10-16 22:29:49 Xhezairi

CSS Стиль Firefox/Safari/Chrome

ответ

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