Расположение набора полей несовместимо в ie7 - PullRequest
Новая
       5

Расположение набора полей несовместимо в ie7

0 голосов
/ 16 ноября 2011

Я пытаюсь использовать легенду набора полей в качестве метки для группы переключателей. HTML и CSS у меня отлично работает в IE8 & 9, Firefox и Chrome. В IE7 метка появляется над переключателями. Во всех других браузерах надпись появляется слева от кнопок. Я рад добавить условный stle для IE7, но я не могу понять, что заставило бы эту работу.

Проблема повторяется в следующей разметке 

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

  <html>
  <head>
  <title>Untitled</title>
  <style type="text/css">
  .radiolegend {
      display: inline;    float: left;    width: 300px;
  }
  .fieldsetstyle {
      border: 0 none;    clear: left;    float: left;
        }

  </style>

  </head>
  <body>
  <form>
  <fieldset class="fieldsetstyle">
  <legend class="radiolegend">legend</legend>
  <input type="radio" name="r1" style="display: inline;" id="r1">
  <label for="r1">r1</label>
  <input type="radio" name="r2" style="display: inline;" id="r2">
  <label for="r2">r2</label>
  </fieldset>
  </form>
  </body>
  </html>

1 Ответ

1 голос
/ 16 ноября 2011

Если вы хотите ie7 условно, сделайте следующее:

CSS 

.radiolegend {
     float: left;    width: 150px;
}
.fieldsetstyle {
 border: 0 none;    clear: left;    float: left; width:300px;
}

.cb{
float:right;
    margin-top:-20px;
}

HTML 

<form>
<fieldset class="fieldsetstyle">
<legend class="radiolegend">legend</legend>
    <div class="cb"><input type="radio" name="r1" style="display: inline;"/>r1</div>
    <div class="cb"> <input type="radio" name="r2" style="display: inline;"/>r2 </div>
    </fieldset></form>

Теперь вам нужно изменить стиль для остальныхбраузеры тоже.Просто удалите margin-top:-20px; из .cb.Вы помещали текст в тег <input>, это неправильно.<input> должен быть самозакрывающимся

...