2013-03-07 3 views
1

Я знаю, что эта проблема, вероятно, обсуждается здесь уже здесь, но у меня все еще возникают проблемы с отображением моих разделов в IE9. Большинство решений указывают на переполнение: скрытые и белые: nowrap или добавление дополнительного поля справа, но ни один из них, похоже, не работает.divs в divs перейти к следующей строке в IE

вот моя CSS часть:

form.cmxform fieldset{ 
margin: 1em 2.4em 2.4em; 
padding: 1em 2em 1em 2em; 
border:2px solid black; 
background:#FCFCFC; 
} 

form.cmxform legend { 
font-size:14pt; 
padding: 2 5 5 5px; 
font-weight: bold; 

} 
form.cmxform label { 

vertical-align: top; 
text-align:left; 
float: left; 
width:450px; 
} 
form.cmxform fieldset ol { 
margin: 0; 
padding: 0; 
} 
form.cmxform fieldset li { 
list-style: none; 
padding: 5px; 
margin: 0; 
} 

div { 
     display: inline-block; 
     overflow: hidden; 
     white-space: nowrap; 
     } 

li > div{ 
/* width:750px;*/ 
border:none; 
font-size:14px; 
border:1px solid red; /* added for visibility */ 
display: inline-block; 
overflow: hidden; 
white-space: nowrap; 
margin-right:3px; 
} 

li > div > div { 
display: inline-block; 
overflow: hidden; 
white-space: nowrap; 
border:1px solid black; /* added for visibility */ 
text-align:center;  /* added for style */ 
width:100px; 
float:left; 
margin-right:3px; 
} 

и вот HTML он должен обратиться.

<form action="verwerking.php" method="post" class="cmxform"> 
<fieldset> 
<legend>Hoe is dit kind op de peuterspeelzaal?</legend> 
    <ol> 
    <li><label>&nbsp;</label><div><div>Zeker Niet</div><div>&nbsp;</div><div>&nbsp; </div><div>&nbsp;</div><div>Zeker Wel</div></div></li> 
    <li><label>&nbsp;</label><div><div>--</div><div>-</div><div>0</div><div>+</div><div>++</div></div></li> 
    <li><label>Dit kind neemt zonder problemen afscheid van de ouder</label><div> 
    <div><input type="radio" name="p_afsche_pr13" value="1"></div> 
    <div><input type="radio" name="p_afsche_pr13" value="2"></div> 
    <div><input type="radio" name="p_afsche_pr13" value="3"></div> 
    <div><input type="radio" name="p_afsche_pr13" value="4"></div> 
    <div><input type="radio" name="p_afsche_pr13" value="5"></div></div></li> 
</ol> 
</fieldset> 

Его работа правильна в хроме на данный момент, но IE, похоже, не согласен с этим. У кого-нибудь есть идеи? спасибо!

+0

я не получаю эту проблему. Просто протестировали на IE9 свою демоверсию. http://jsfiddle.net/XuD6j/ – otinanai

+0

Хм, Ive открыл вашу скрипку в IE9, и, похоже, она действительно работает, но потом я удивляюсь, почему она не работает на моей фактической веб-странице: http://www.doenwatikkan.nl /jeroen/login.php Это вторая страница после приветственной страницы. Я не хотел публиковать все это, потому что это немного грязно, но, должно быть, что-то дополнительное, что несовместимо с IE9. – Jeroen

+0

Я уверен, что где-то должно быть свойство css, которое устанавливает 'div' to 'display: block'. Дай мне проверить. – otinanai

ответ

0

добавить ширина: 600px; к form.cmxform Fieldset {}

form.cmxform fieldset { 
    margin: 1em 2.4em 2.4em; 
    padding: 1em 2em 1em 2em; 
    border:2px solid black; 
    background:#FCFCFC; 
    width:600px; 
} 

ваш HTML будет гораздо easyer читать, если вы разместите его так: (никаких изменений не было сделано здесь, только пробелы в коде)

<form action="verwerking.php" method="post" class="cmxform"> 
<fieldset> 
    <legend>Hoe is dit kind op de peuterspeelzaal?</legend> 
    <ol> 
     <li> 
      <label>&nbsp;</label> 
      <div> 
       <div>Zeker Niet</div> 
       <div>&nbsp;</div> 
       <div>&nbsp;</div> 
       <div>&nbsp;</div> 
       <div>Zeker Wel</div> 
      </div> 
     </li> 
     <li> 
      <label>&nbsp;</label> 
      <div> 
       <div>--</div> 
       <div>-</div> 
       <div>0</div> 
       <div>+</div> 
       <div>++</div> 
      </div> 
     </li> 
     <li> 
      <label>Dit kind neemt zonder problemen afscheid van de ouder</label> 
      <div> 
       <div> 
        <input type="radio" name="p_afsche_pr13" value="1"> 
       </div> 
       <div> 
        <input type="radio" name="p_afsche_pr13" value="2"> 
       </div> 
       <div> 
        <input type="radio" name="p_afsche_pr13" value="3"> 
       </div> 
       <div> 
        <input type="radio" name="p_afsche_pr13" value="4"> 
       </div> 
       <div> 
        <input type="radio" name="p_afsche_pr13" value="5"> 
       </div> 
      </div> 
     </li> 
    </ol> 
</fieldset> 

также быстро google для «html span». Тег span является встроенным элементом. вы можете использовать span со стилем = "display: block;" или "display: inline-block;" в этом случае вы можете изменить все дивы внутри литий с

<span style="display:inline-block;">xxxXXXxxx</span> 

и вы не должны плавать что-нибудь

Смежные вопросы