IE7 ошибка, поля ввода моей формы имеют отступ - PullRequest
Новая
       15

IE7 ошибка, поля ввода моей формы имеют отступ

1 голос
/ 12 апреля 2010

HTML 

<form id="contact_form" action="#" name="" method="POST">
  <label for="name">NAME</label>
  <input type="text" name="name" id="name" class="contact_form_input" />
  <label for="email">EMAIL</label>
  <input type="text" name="email" id="email" class="contact_form_input" />
  <label for="subject">SUBJECT</label>
  <input type="text" name="subject" id="subject" class="contact_form_input" />
  <label for="message">MESSAGE</label>
  <textarea name="message" id="message"></textarea>
  <input type="submit" class="submit" name="submit" value="Submit" />
  <input type="reset" class="reset" name="reset" value="Reset" />
</form>

CSS 

form#contact_form{
width:auto;
height:auto;
margin:0px;
margin-left:73px;
padding:0px;
float:left;
clear:both;
}

form#contact_form label{
float:left;
clear:both;
margin-left:3px;
margin-bottom:6px;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:italic;
font-weight:bold;
}

input.contact_form_input{
width:474px;
height:36px;
margin:0px;
margin-bottom:9px;
padding:0px;
float:left;
clear:left;
}

form#contact_form textarea{
width:479px;
height:150px;
margin-bottom:9px;
float:left;
clear:left;
}

вы можете видеть здесь , что в IE7 этот текстовый ввод получает своего рода "поле слева". Как я могу избавиться от этого поля? спасибо

Ответы [ 2 ]

3 голосов
/ 12 апреля 2010

Ваш самый простой вариант - использовать следующий CSS: 

form#contact_form label{
display: block;
margin-left:3px;
margin-bottom:6px;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:italic;
font-weight:bold;
}

Но я бы рекомендовал вам обернуть каждую из ваших входных строк (включая метку) в элемент уровня блока, такой как тег <p> или элемент списка: 

<form id="contact_form" action="#" name="" method="POST">
  <ul>
    <li>
      <label for="name">NAME</label>
      <input type="text" name="name" id="name" class="contact_form_input" />
    </li>
  ...

Эта статья из A List Apart - отличное введение.

0 голосов
/ 12 апреля 2010

Я бы предложил использовать условные комментарии: (вставьте это в голову) 

<!--[if lt IE 8]>
        <link href="IE.css" rel="Stylesheet" type="text/css"/>

    <![endif]-->

и настройте несколько отдельных CSS_ 

     input.contact_form_input{
        width:474px;
        height:36px;
        margin:0px;
        margin-bottom:9px;
    margin-left:-10px;/*or whatever px distance works*/
        padding:0px;
        float:left;
/*remove clear:left;*/
    }

Это то, что я всегда делаю, чтобы сделать IEвести себя.

...