Проблема IE9 с плавающей точкой: справа и сверху для кнопки «Мой виджет поиска» - PullRequest
Новая
       7

Проблема IE9 с плавающей точкой: справа и сверху для кнопки «Мой виджет поиска»

0 голосов
/ 26 февраля 2012

В Chrome веб-сайт bmr1.com показывает виджет поиска с увеличительным стеклом в качестве фонового изображения кнопок отправки. Чтобы заставить кнопку перемещения двигаться, я добавил Float: Right и Margin-top, чтобы получить его в правильном положении. Мне также пришлось добавить position: относительный, чтобы кнопка располагалась поверх текстового поля. Проблема в том же крае: 31px, который исправляет Chrome, делает кнопку отправки IE9 слишком высокой и неуместной. 

bmr1.com

<div id="search-2" class="widget widget_search"><h4 class="widgettitle"><cufon class="cufon cufon-canvas" alt="Search" style="width: 64px; height: 22px; "><canvas width="80" height="28" style="width: 80px; height: 28px; top: -4px; left: -1px; "></canvas><cufontext>Search</cufontext></cufon></h4><form role="search" method="get" id="searchform" action="http://bmr1.com/">
    <label class="screen-reader-text" for="s">Search for:</label>
    <input type="text" value="" name="s" id="s" placeholder="" widdit="on" autocomplete="off">
    <input type="submit" id="searchsubmit" value="">
    </form><div id="predictad_div" class="predictad"></div></div>


#sidebar1 { position: relative; }
#search-2.widget.widget_search {z-index:0; background-color: #363636; margin-right:15px; margin-bottom:25px; padding: 10px 10px 10px 10px; color:#363636; max-width:231px;}
#search-2.widget.widget_search #s{width:94%; padding: 5px;position:relative;}
#search-2.widget.widget_search h4  {font-size:140%; background-color: #84c4e7; padding: 5px 10px 5px 10px; border: 1px solid #fff; margin-bottom:10px;}
.widget_search .screen-reader-text {margin-bottom:-20px;float:right;}
#mp_cart_widget-3.widget.mp_cart_widget { background-color: #cdcdcd; margin-right:15px; margin-bottom:25px; padding: 10px 10px 10px 10px; max-width:231px;}
#mp_cart_widget-3.widget.mp_cart_widget h4  { font-size:140%; background-image:url('http://technickconsulting.com/testblog/wp-content/themes/BoatMotorRecyclers/images/greysliver.png'); background-repeat: repeat-x; padding: 5px 10px 6px 10px; margin-bottom:10px; color:#fff; }
#mp_categories_widget-3.widget.mp_categories_widget { background-color: #363636; margin-right:15px; margin-bottom:20px; padding: 10px 10px 10px 10px; color:#fff; max-width:231px;}
#mp_categories_widget-3.widget.mp_categories_widget h4 { font-size:140%; background-color: #84c4e7; padding: 5px 0px 5px 10px; border: 1px solid #fff; margin-bottom:10px; color:#363636;}
#mp_categories_widget-3.widget.mp_categories_widget a {text-decoration:none; color:#fff; margin-left: 30px; }
#sidebar ul {font-size:18px;  font-weight:bold; }
ul#mp_category_list {padding-right:10px;font-size:18px; }
ul#mp_category_list .children {text-align:left;list-style: none;margin-left:10px; font-size:15px !important;}
.widget_search #searchsubmit {
background-image:url('http://technickconsulting.com/testblog/wp-content/themes/BoatMotorRecyclers/images/magglass.png');
background-color:transparent;
border:none;
background-repeat:no-repeat;
color:transparent;
height: 28px;
width:30px;
cursor: pointer;
float:right;
padding: 8px 16px;
margin-top:-31px;
position:relative;
  }

Ответы [ 2 ]

0 голосов
/ 26 февраля 2012

Я согласен с предыдущим комментатором, используйте reset.css! Разные браузеры имеют разные значения полей по умолчанию, отступов и т. Д. Для всех, и это заставляет вашу веб-страницу выглядеть по-разному в каждом из них.

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

#search-2.widget.widget_search #s{width:94%;height:20px; padding: 5px;position:relative;}

Изменение заключается в том, что я применил высоту 20 пикселей для элемента

Затем примените следующее к кнопке отправки: 

.widget_search #searchsubmit {
background-image:url('http://technickconsulting.com/testblog/wp-content/themes/BoatMotorRecyclers/images/magglass.png');
background-color:transparent;
border:none;
background-repeat:no-repeat;
color:transparent;
height: 28px;
width:30px;
cursor: pointer;
float:right;
bottom:31px;
position:relative;
  }

Вы должны использовать шорткоды, например background: url ('http://technickconsulting.com/testblog/wp-content/themes/BoatMotorRecyclers/images/magglass.png') без повтора; чтобы сделать ваш код короче и чище

Надеюсь, это решит вашу проблему.

0 голосов
/ 26 февраля 2012

Попробуйте: 

.widget_search #searchsubmit {
background-image: url('http://technickconsulting.com/testblog/wp-content/themes/BoatMotorRecyclers/images/magglass.png');
background-color: transparent;
border: none;
background-repeat: no-repeat;
height: 28px;
width: 30px;
cursor: pointer;
position: absolute;
z-index: 10;
top: 3px;
right: 0;
}

#search-2 form {position: relative;}

Кроме того, я настоятельно рекомендую использовать сброс CSS!Это сделает каждую небольшую разницу в планировке между браузерами исчезнет.Вам нужно будет перезаписать некоторые из этих значений, но в долгосрочной перспективе это избавит вас от многих неприятностей!

Пример: http://meyerweb.com/eric/tools/css/reset/

...