css - 表格在ie7中看起来很像。 CSS帮助。 (包括屏幕截图)

这是jfiddle：http://jsfiddle.net/sPBtg/1/

在IE7中，测验的输入框向下一行，我不知道为什么要这么做。这是我的意思的屏幕截图：



我需要更改什么？

另外，我注意到在IE7开发人员工具中，我得到了一个奇怪的空文本节点。如果我通过开发人员工具删除了该文本节点，一切将再次正常运行。

最佳答案

尝试将输入框拉出跨度的一侧。您也只需要一个跨度即可包装标签文本。尝试类似的东西：

<p class="quiz-wrap">
<span class="wpcf7-quiz-label">10+10=</span>
<input type="text" class="wpcf7-quiz" name="quiz">
<input type="hidden" value="996f7d842c0e718f50c0d1890f7adb57" name="_wpcf7_quiz_answer_quiz">

   .quiz-wrap {
    float: left;
    margin:0;
   }

.wpcf7-quiz-label {
    color: #848383;
    float: left;
    font-size: 0.9em;
    line-height: 19px;
}

.quiz-wrap input {
    float: left;
    margin: 0 0 0 5px;
    padding: 3px;
    width: 30px;
}

    input {
    -moz-box-sizing: border-box;
    background: none repeat scroll 0 0 #232323;
    border: 1px solid #4D4D4D;
    color: #F5F5F5;
    display: block;
    font-size: 1em;
   }

问答包装的位置是否相对有特定原因吗？我在您的样本中没有看到任何实际用途，因此将其删除。您可能需要检查IE开发人员工具中的“布局”选项卡，以查看浏览器是否也在输入框的顶部设置了边距或其他偏移量。

关于css - 表格在ie7中看起来很像。 CSS帮助。 (包括屏幕截图)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/5345873/