CSS3 Рендеринг между браузерами

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

Я создаю веб-сайт и в настоящее время работаю над навигационной панелью. Поскольку я строю панель поиска, используя изображение спрайта, я столкнулся с проблемой при просмотре сайта в разных браузерах. изображение кнопки поиска по-разному влияет на сафари по сравнению с firefox, chrome, IE и Opera.

<hgroup> <form id=header-search> <input class=searchbox placeholder="Search Spout TV"><input type=submit class=button value=""/> </form> <p class=login><a href="#">LogIn</a><p class=arrow-down></p></p> <p class=line>|</p> <p class=signup><a href="register.html">Sign Up</a></p> </hgroup>

это CSS3 код для него:

#header-search { 
    overflow: visible; 
} 
input.searchbox { 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    background-color: #af5354; 
    border: 1px solid #af5354; 
    border-radius: 5px; 
    color: #fff; 
    float: left; 
    height: 19px; 
    margin-left: 0.5em; 
    margin-top: 0.2em; 
    outline: 0 none; 
    padding-left: 0.5em; 
    padding-top: 0.3em; 
    text-align: left; 
    width: 220px; 
} 
input.searchbox { 
    margin-top: 00.3em; 
} 
input.searchbox:focus { 
    background: #e87476; 
    background: -moz-linear-gradient(top, #e87476 0%, #e87476 20%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e87476), color-stop(20%, #e87476)); 
    outline: 0; 
    color: #FFF; 
} 
*::-webkit-input-placeholder { 
    color: #FFF; 
} 
*:-moz-placeholder { 
    color: #FFF; 
} 
*::-moz-placeholder { 
    color: #FFF; 
} 
*:-ms-input-placeholder { 
    color: #FFF; 
} 
#header-search input.button { 
    border: 0; 
    padding: 0; 
    margin: 2px 0 0 -36px; 
    width: 38px; 
    height: 30px; 
    float: left; 
    border: none; 
    background: url("../../assets/images/sprite.png") -142px -7px; 
    overflow: hidden; 
} 
#header-search input.button:hover { 
    border: 0; 
    padding: 0; 
    margin: 2px 0 0 -36px; 
    width: 38px; 
    height: 30px; 
    background: url("../../assets/images/sprite.png") -142px -47px; 
    float: left; 
    border: none; 
}

Любая помощь будет оценена.

спасибо.

источник

2015-02-05 Nekta Hondros

Вид элементов html отличается в каждом веб-браузере, и все потому, что каждый веб-браузер может иметь разный движок. Если вы хотите иметь аналогичный дисплей в каждом веб-браузере, возможно, вам стоит попробовать использовать boostrap? 1.You можно скачать с: http://getbootstrap.com/ 2.Next вы должны поместить файл bootstrap.min.css в том месте, где находится ваш index.html 3.Next включают команду

<link type="text/css" rel="stylesheet" href="bootstrap.min.css" />

между

<head></head>

маркеры.

Второй случай-Если Вы используете HTML5 и CSS3 Вам не нужно использовать

-webkit-border-radius:

Просто используйте:

border-radius:

Для всех (реальных версий) веб-браузеры это должно быть в порядке ,

Или, может быть, я не понимаю ваш вопрос .. хм?

источник

2015-02-05 02:40:32 user211112

Hello Marcin, Спасибо за это. Если вы перейдете на сайт www.spouttv.com/spout/index.html и посмотрите на кнопку поиска, то она будет отображаться одинаково со всеми браузерами, за исключением сафари. В сафари она помещается на 1px, где, как и все остальные строки браузеров вверх. Вы понимаете, о чем я? –

Может быть, попробовать использовать

из <форма ид = «заголовок-поиска»> – user211112

конечно, не забудьте использовать также

маркеры внутри

, может быть, это поможет хмм .. – user211112

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

CSS3 Рендеринг между браузерами

ответ

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