Question

我知道这个问题可能已经在这里讨论了，但我仍然在IE9中显示我的部门时遇到问题。大多数解决方案都指向溢出：隐藏和空白：nowrap，或者添加额外的边距 - 右边，但这些似乎都不起作用。

这是我的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>

此刻它在Chrome中运行正常，但IE似乎并不同意它。有人有什么想法吗？谢谢！

Answer 1

添加宽度：600px; to 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发布为以下内容，您的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>

也快速谷歌“html span”。 span标记是内联元素。你可以使用带有style =“display：block;”的span。或“display：inline-block;”在这种情况下，您可以使用

更改li中的所有div

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

你不需要漂浮任何东西

div中的div跳转到IE中的下一行

1 个答案: