这是 jfiddle:http://jsfiddle.net/sPBtg/1/
在 IE7 中,测验的输入框向下一行,我不明白为什么会这样。这是我的意思的屏幕截图:
我需要改变什么?
此外,我注意到在 IE7 开发人员工具中,我得到了一个奇怪的空文本节点。如果我通过开发人员工具删除该文本节点,一切都会恢复正常。
最佳答案
尝试将输入框拉出 span 的一侧。你也真的只需要一个 span 来包装标签文本。尝试类似的东西:
<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;
}
测验总结是 position:relative 有什么具体原因吗?我没有在您的示例中看到任何实际用途,所以我将其删除。您可能需要检查 IE 开发人员工具中的布局选项卡,看看您的浏览器是否也为输入框的顶部设置了边距或其他偏移量。
关于css - 表单在 ie7 中看起来不合适。帮助。 (包括截图),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5345873/