Перейти к содержимому

Реферальная программа Мегаплана

Партнерская программа Kredov

Почему padding не работает в input в IE

#1 Sergey_net_it

Sergey_net_it
  • Пользователь
  • 5 сообщений
  • Репутация: 0
0

Отправлено 29 Декабрь 2013 - 21:46

Для input установил padding для левого и правого края отступ в padding:0 70px 0 20px;. Во всех браузерах работает правильно, кроме IE
Вот как отображается во всех браузерах http://joxi.ru/pzTAUhjKTJBmHAemBsw
А так отображается в IE http://joxi.ru/wDTAUv3JTJCxEUNG4OU
Введенный текст залазит и на кнопку Поиск.
В чем проблема?
Вот структура html
Код HTML:
<form action="/" method="get"> <input type="text" name="s" id="s" class="findText" value="<?php the_search_query();?>"placeholder="Поиск на сайте..."> <a href="javascript:document.forms[0].submit();" class="click" ></a> </form>
Вот примененные стили
Код HTML:
.search{
width: 150px;
height: 24px;
margin: 20px 0 0 24px;
border-radius: 30px;
background:url(./img/bg-find.jpg);
position: relative;
}
.search input[type="text"]:hover{
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}
.search input[type="text"]:focus{
background: none repeat scroll 0 0 #FFFFFF;
	box-shadow: 0 0 0 3px #80A62D;
	color:#000;
}
.search input[type="text"]{
width: 150px;
height: 24px;
float: left;
border: medium none;
border-radius: 30px;
background:url(./img/bg-find.jpg);
color:#fff;
font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 24px;
padding:0 70px 0 20px;
}
.click{
width: 68px;
height: 22px;
position: absolute;
right:-90px;
top:1px;
float:left;
background: url(./img/button-find-sprite.png) no-repeat;
}
.click:hover{
width: 68px;
height: 22px;
background: url(./img/button-find-sprite.png) no-repeat  0 -22px;
}
Эффект можно увидить здесь http://fr3809bb.bget.ru
Вот наглядно отступы есть http://joxi.ru/hkDAUv3JTJCQETxoJqM
А вот в IE http://joxi.ru/60HAUv3JTJCaEduF0u0

 

 

  • 0


Оформление форума – IPBSkins.ru