Recommended Posts

Проблемма в том, что в поле ввода хрома "Поиск..." (placeholder="Поиск...") отображается на одном уровне,а вводимый пользователем текст на пару пикселей ниже. В фф и иэ все нормально. Глаз режет, помогите(

 

Код:

[hide]

<!DOCTYPE html><html> <head>  <meta charset="utf-8">  <title>Форма для поиска</title>  <style>body{background:#394e63;font-family: "PT Sans",Verdana,Arial,sans-serif;}.search {width: 240px;height: 35px;border-radius: 10px;background:#fff;}input[type="text"] {padding:0;margin:0;display:block;height:35px;border: none;outline: none;-webkit-appearance: none;width: 197px;margin: 0px 0px 0px 9px;float:left;font:16px/19px "Trebuchet MS", Arial, Helvetica, sans-serif;color:#394e63;}input[type="submit"] {width: 20px;height: 20px;border: none;background: url(img/search.png) no-repeat;float:right;margin: 7px 7px 0px 0px;outline: none;-webkit-appearance: none;}input::-ms-clear {display: none;}input[type="submit"]:hover{background: url(img/search_hover.png) no-repeat;cursor:pointer;}  </style> </head> <body>  <form>    <div class="search">     <input type="text" name="search" placeholder="Поиск...">     <input type="submit" value="">   </div>  </form> </body>

[/hide]

Share this post


Link to post
Share on other sites
Я так сделал
вроде везде норм
правда в ие не очень но все же

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Форма для поиска</title>
  <style>
body{
background:#394e63;
font-family: "PT Sans",Verdana,Arial,sans-serif;
}
.search {
width: 240px;
height: 35px;
border-radius: 10px;
background:#fff;
}
input[type=text] {
margin:0px 0 0 9px;
padding:5px 0 0 0;
border:none;
outline:none;
font:16px/19px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#394e63;
line-height: 1.4;
}
input[type=submit] {
width: 20px;
height: 20px;
border: none;
background: url(img/search.png) no-repeat;
float:right;
margin: 7px 7px 0px 0px;
outline: none;
-webkit-appearance: none;
}
input::-ms-clear {
display: none;
}
input[type=submit]:hover{
background: url(img/search_hover.png) no-repeat;
cursor:pointer;
}
  </style>
 </head>
 <body>
  <form>
    <div class="search">
     <input type="text" name="search" placeholder="Поиск...">
     <input type="submit" value="">
   </div>
  </form>
 </body>

Share this post


Link to post
Share on other sites

В крайнем случае для ие вообще можно отдельный css файл вынести через условные комментарии и поправить все.

Share this post


Link to post
Share on other sites

Не все же люди знают английский и могут читать английские статьи.

Вот ознакомитесь с условными комментариями. И поместите внутрь адрес к файлу для стилей ie и вносите туда необходимые изменения.

Share this post


Link to post
Share on other sites

Как и написали выше, Для ИЕ используйте условные комментарии. Но выравнивать текст лучше через свойство line-height. указываете его равной высоте поля. Это должно помочь.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By kapushoniha
      Добрый день!
      Столкнулась со странной проблемой, буду признательна, если вы объясните в чем дело.
      Подключила шрифт Gotham вместо OpenSans на страницу, после чего ссылки c font-weight: 500 перестали работать.
        Для начертаний bold и 300 все ок.
      Как вообще начертание шрифта может влиять на работу тега и почему это не происходит с OpenSans ?
      Шрифт подключаю так:
      <style> @font-face { font-family: 'Gotham'; src: url("{{asset 'Gotham-Medium.eot'}}"); src: url("{{asset 'Gotham-Medium.eot?#iefix'}}") format('embedded-opentype'), url("{{asset 'Gotham-Medium.woff2'}}") format('woff2'), url("{{asset 'Gotham-Medium.woff'}}") format('woff'), url("{{asset 'Gotham-Medium.ttf'}}") format('truetype'); font-weight: 500; font-style: normal; } @font-face { font-family: 'Gotham'; src: url("{{asset 'Gotham-Bold.eot'}}"); src: url("{{asset 'Gotham-Bold.eot?#iefix'}}") format('embedded-opentype'), url("{{asset 'Gotham-Bold.woff2'}}") format('woff2'), url("{{asset 'Gotham-Bold.woff'}}") format('woff'), url("{{asset 'Gotham-Bold.ttf'}}") format('truetype'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Gotham'; src: url("{{asset 'Gotham-Light.eot'}}"); src: url("{{asset 'Gotham-Light.eot?#iefix'}}") format('embedded-opentype'), url("{{asset 'Gotham-Light.woff2'}}") format('woff2'), url("{{asset 'Gotham-Light.woff'}}") format('woff'), url("{{asset 'Gotham-Light.ttf'}}") format('truetype'); font-weight: 300; font-style: normal; } </style>  
      Заранее спасибо!
       
       

    • By Flex12
      Всем привет. У меня при верстке сайта по уроку возникла проблема. Сверстал все один в один (перепроверил несколько раз), но по итогу получается смещение элементов. Из за чего такое может произойти? Ссылку на скрин оставлю ниже (1левый экран то как у него, а (2)правый то как у меня) Скрин для наглядности, чтобы понять о чем я.
       
  • Member Statistics

    46,457
    Total Members
    3,128
    Most Online
    Nip
    Newest Member
    Nip
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.