Question

使用以下HTML和CSS，当我使用Doctype进行过渡（或松散dtd）时，IE8和Firefox 25中的复选框标签显示正常。当我将Doctype更改为html5时，复选框标签在IE8中显示正常，但在Firefox中，每个复选框标签在“复选框”和数字之间断开。我会更改哪些内容，以便为IE8和Firefox正确呈现复选框标签？

<!-- Check box labels render fine in IE8 and Firefox -->
<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">-->

<!-- Check box lables render fine in IE8 but not Firefox -->
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<style type="text/css">
body
{
    font-family: Arial;
    font-size: 10pt;
    font-style: normal;
    font-weight: normal;
}

label.fieldLabel
{
    font-weight: bold;
    padding-right:10px;
    width: 150px;
    float: left;
    clear: both;
}

.reqField
{
    color: Red;
    padding: 0px 5px; 
    font-size: 12px;
    width: 5px;
    float: left;
}

.notReqField
{
    padding: 0px 5px; 
    width: 5px;
    float: left;
}

</style>

</head>
<body>

<form id="checkboxForm" action="/webdesign/getCheckboxForm.do" method="POST">

                    <label class="fieldLabel">Checkbox (grouped):</label>
                    <span class="reqField">*</span>

                    <div id="checkboxGroup" style="vertical-align: bottom; overflow: auto; float: left;">
                        <span>
                            <input id="checkboxList1" name="checkboxList" tabindex="3" required="required" type="checkbox" value="Checkbox 1"/>
                            <label for="checkboxList1">Checkbox 1</label>
                        </span>
                        <span><br>
                            <input id="checkboxList2" name="checkboxList" tabindex="3" required="required" type="checkbox" value="Checkbox 2"/>
                            <label for="checkboxList2">Checkbox 2</label>
                        </span>
                        <span><br>
                            <input id="checkboxList3" name="checkboxList" tabindex="3" required="required" type="checkbox" value="Checkbox 3"/>
                            <label for="checkboxList3">Checkbox 3</label>
                        </span>
                        <span><br>
                            <input id="checkboxList4" name="checkboxList" tabindex="3" required="required" type="checkbox" value="Checkbox 4"/>
                            <label for="checkboxList4">Checkbox 4</label>
                        </span>
                        <input type="hidden" name="_checkboxList" value="on"/>
                    </div>

                    </form> 

</body>
</html>

http://jsfiddle.net/isherwood/qxt65

Answer 1

这是因为您的父div checkboxGroup。 Firefox倾向于在浮动div上设置宽度。这里的自动宽度太小，无法在复选框旁边显示标签。

我会编辑我的答案以添加更多详细信息。

所以，改变

<div id="checkboxGroup" style="vertical-align: bottom; overflow: auto; float: left;">

到（设置宽度）

<div id="checkboxGroup" style="vertical-align: bottom; overflow: auto; float: left; width: 200px;">

或（删除浮动）

<div id="checkboxGroup" style="vertical-align: bottom; overflow: auto;">

Answer 2

而不是人工标记和CSS浮动（这在尝试创建表格外观时会导致许多类似问题），只需将标签和字段放在HTML表格中即可。

或者，如果真实情况与示例中的情况一样简单，只需使用一些标记，在适当的位置（br，div或不太方便p导致换行符）并删除所有奇怪的样式。

CSS - 使用html5的复选框标签问题

2 个答案: