Question

在IE7中，在问题和选项之间创建了额外的间距，但仅针对第一个问题。如果我删除了<h1>标题，则差距会消失。它不会发生在IE8中。是什么原因以及如何使其在IE7中运行？

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        .question { padding-bottom: 25px; } 
        .questionNumber { width:30px; float:left; } 
        .questionText { float:left; margin-bottom:5px; }
        .options { clear:both; margin-left:30px; } 
    </style>
</head>

<body>
    <h1>Survey</h1> <!-- if this line is removed, the gap disappears -->
    <div class="question">
        <div class="questionNumber">1)</div>
        <div class="questionText">Question 1:</div>
        <div class="options">
            <input type="radio">Option 1 <br>
            <input type="radio">Option 2 <br>
            <input type="radio">Option 3 <br>
            <input type="radio">Option 4 <br>
        </div>
    </div>

    <div class="question">
        <div class="questionNumber">2)</div>
        <div class="questionText">Question 2:</div>
        <div class="options">
            <input type="radio">Option 1 <br>
            <input type="radio">Option 2 <br>
            <input type="radio">Option 3 <br>
            <input type="radio">Option 4 <br>
        </div>
    </div>

</body>
</html>

enter image description here

Answer 1

这种风格：

h1{
margin:0;
padding:0;
}

注意：您使用的是html5 DOCTYPE。 HTML5不支持较低版本，即。

Answer 2

浮动会导致问题。从float:left的声明中删除.questionText。

Answer 3

在h1上重置样式，可能是行高将其推下来。

h1 {
line-height:0;
margin:0;
padding:0;
}

我建议使用重置样式表，因为它可以节省您的调试头痛

http://meyerweb.com/eric/tools/css/reset/

Answer 4

在h1上重置样式。就像这样

h1 {
  padding: 0;
  margin: 0;
  display: block;
  clear: both;
}

我认为它可能会对你有所帮助。试试吧。

由于h1标签，IE7中的空间

4 个答案: