相同配置的复选框表单元素生成相同的 HTML 代码，但显示不同答案

【问题标题】：Identically configured checkbox form elements produce identical HTML code but display differently相同配置的复选框表单元素生成相同的 HTML 代码，但显示不同
【发布时间】：2019-10-20 17:59:03
【问题描述】：

我正在简化我网站的注册页面，以便新用户更快、更轻松地注册新用户帐户。

我正在使用 Zend 和 PHP，但我遇到了一个非常奇怪的问题：

4 个复选框，创建方式相同
前两个显示正常
后两个以损坏的格式显示（如下所述）

尝试了以下方法：

在页面周围移动有效的复选框 - 它们继续有效。
在页面周围移动损坏的复选框 - 它们继续失败。
正在刷新浏览器缓存。
重启 apache
进行文本比较以确保所有代码都相同。

PHP表单定义：

    $this->addElement('checkbox','user_working1',array(
        'label'=>'&nbsp;&nbsp;&nbsp;&nbsp;I am working1',
        "class"      => "form-control hoverToolTip",
        "required"   => false,
    ));



    $this->addElement('checkbox','user_working2',array(
        'label'=>'&nbsp;&nbsp;&nbsp;&nbsp;I am working2',
        "class"      => "form-control hoverToolTip",
        "required"   => false,
    ));


    $this->addElement('checkbox','user_broken3',array(
        'label'=>'I am broken3',
        "class"      => "form-control hoverToolTip",
        "required"   => false,
    ));


    $this->addElement('checkbox','user_broken4',array(
        'label'=>'&nbsp;&nbsp;&nbsp;&nbsp;I am broken4',
        "class"      => "form-control hoverToolTip",
        "required"   => false,          
    ));

PHP 视图：

<div class="row margin-0">
    <div class="col-sm-4 col-md-3">
        <div class="">
            <h4 class="form-signin-heading">
                Professional Profile&nbsp; <i class="fa fa-briefcase"></i>
            </h4>

        </div>
    </div>
    <div class="col-sm-8 col-md-9">
        <div class="row">
            <div class="col-sm-6">
                <div class="input-group form-group">
                        <?php echo $this->form->user_working1?> 
                    </div>
            </div>
            <div class="col-sm-6">
                <div class="input-group form-group"> 
                        <?php echo $this->form->user_working2?> 
                    </div>
            </div>
        </div>
    </div>
</div>

<div class="row margin-0">
    <div class="col-sm-4 col-md-3">
        <div class="">
            <h4 class="form-signin-heading">
                Professional Profile&nbsp; <i class="fa fa-briefcase"></i>
            </h4>

        </div>
    </div>
    <div class="col-sm-8 col-md-9">
        <div class="row">
            <div class="col-sm-6">
                <div class="input-group form-group">
                        <?php echo $this->form->user_broken3?> 
                    </div>
            </div>
            <div class="col-sm-6">
                <div class="input-group form-group"> 
                        <?php echo $this->form->user_broken4?> 
                    </div>
            </div>
        </div>
    </div>
</div>

HTML 输出：

    <div class="row margin-0">
        <div class="col-sm-4 col-md-3">
            <div class="">
                <h4 class="form-signin-heading">
                    Professional Profile&nbsp; <i class="fa fa-briefcase"></i>
                </h4>

            </div>
        </div>
        <div class="col-sm-8 col-md-9">
            <div class="row">
                <div class="col-sm-6">
                    <div class="input-group form-group">
                            <div class=" form-group "><label for="user_working1" class="optional">&nbsp;&nbsp;&nbsp;&nbsp;I am working1</label>

<input type="hidden" name="user_working1" value="0"><input type="checkbox" name="user_working1" id="user_working1" value="1" class="form-control hoverToolTip"></div> 
                        </div>
                </div>
                <div class="col-sm-6">
                    <div class="input-group form-group"> 
                            <div class=" form-group "><label for="user_working2" class="optional">&nbsp;&nbsp;&nbsp;&nbsp;I am working2</label>

<input type="hidden" name="user_working2" value="0"><input type="checkbox" name="user_working2" id="user_working2" value="1" class="form-control hoverToolTip"></div> 
                        </div>
                </div>
            </div>
        </div>
    </div>



    <div class="row margin-0">
        <div class="col-sm-4 col-md-3">
            <div class="">
                <h4 class="form-signin-heading">
                    Professional Profile&nbsp; <i class="fa fa-briefcase"></i>
                </h4>

            </div>
        </div>
        <div class="col-sm-8 col-md-9">
            <div class="row">
                <div class="col-sm-6">
                    <div class="input-group form-group">
                            <div class=" form-group "><label for="user_broken3" class="optional">&nbsp;&nbsp;&nbsp;&nbsp;I am broken3</label>

<input type="hidden" name="user_broken3" value="0"><input type="checkbox" name="user_broken3" id="user_broken3" value="1" class="form-control hoverToolTip"></div> 
                        </div>
                </div>
                <div class="col-sm-6">
                    <div class="input-group form-group"> 
                            <div class=" form-group "><label for="user_broken4" class="optional">&nbsp;&nbsp;&nbsp;&nbsp;I am broken4</label>

<input type="hidden" name="user_broken4" value="0"><input type="checkbox" name="user_broken4" id="user_broken4" value="1" class="form-control hoverToolTip"></div> 
                        </div>
                </div>
            </div>
        </div>
    </div>

.input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:last-child > .btn, .input-group-btn:last-child > .dropdown-toggle, .input-group-btn:first-child > .btn:not(:first-child) {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}
.input-group-addon, .input-group-btn, .input-group .form-control {
    display: table-cell;
}
.input-group .form-control {
    width: 100%;
    margin-bottom: 0;
}
input[type="radio"], input[type="checkbox"] {
    margin: 4px 0 0;
    margin-top: 1px \9;
    line-height: normal;
}
input[type="checkbox"], input[type="radio"] {
    padding: 0;
    box-sizing: border-box;
}
.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555555;
    vertical-align: middle;
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #cccccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
input, button, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
button, input {
    line-height: normal;
}
button, input, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: 100%;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
user agent stylesheet
input[type="checkbox" i] {
    margin: 3px 3px 3px 4px;
}
user agent stylesheet
input[type="checkbox" i] {
    -webkit-appearance: checkbox;
    box-sizing: border-box;
}
user agent stylesheet
input[type="checkbox" i] {
    background-color: initial;
    cursor: default;
    margin: 3px 0.5ex;
    padding: initial;
    border: initial;
}
user agent stylesheet
input {
    padding: 1px 0px;
}
user agent stylesheet
input {
    -webkit-appearance: textfield;
    background-color: white;
    -webkit-rtl-ordering: logical;
    cursor: text;
    padding: 1px;
    border-width: 2px;
    border-style: inset;
    border-color: initial;
    border-image: initial;
}
user agent stylesheet
input {
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0em;
    font: 400 13.3333px Arial;
}
user agent stylesheet
input {
    -webkit-writing-mode: horizontal-tb !important;
}
.input-group {
    position: relative;
    display: table;
    border-collapse: separate;
}
body {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    color: #323232;
}
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.428571429;
    color: #333333;
    background-color: #ffffff;
}
html {
    font-size: 62.5%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
user agent stylesheet
html {
    color: -internal-root-color;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

预期结果：

左侧显示所有复选框，右侧显示标签

实际结果：

2 个复选框按预期工作
显示 2 个损坏的复选框，标签位于复选框上方，复选框位于文本框的中间

【问题讨论】：

这听起来像是 CSS 样式问题。在浏览器窗口中右键单击复选框、标签元素并包含 DIV，然后比较工作 VS 非工作复选框的“计算”样式。可能要比较的 CSS 样式是“显示”。如果标签在自己的行上，它们可能被设置为 display: block
这使用 Bootstrap？如果我测试你的 HTML，我会得到：jsfiddle 使用&nbsp;&nbsp;&nbsp;&nbsp; 从来都不是对齐文本的好方法......我会从那里开始。
是的，对不起，我应该提到我的网站使用引导程序。
删除标签中的空格 ( ) 没有区别。
这确实是我从你的问题中得到的。但是我们不能使用图像。正如 Ryan 在 15 分钟前已经得出的结论，这一定是 CSS 样式问题。我同意这一点。您可以自己检查样式，或者让我们帮助您，但我们需要知道您使用了哪些样式：optional 等类。

标签： php forms checkbox zend-framework

【解决方案1】：

我发现了一些不久前编写的自定义 CSS。自定义 CSS 正在将自定义样式应用于元素名称！

这就是为什么我无法让损坏的字段工作以及工作字段继续工作的原因。

您可能已经知道，我不是 CSS 专家，但我将专注于整理我的 CSS，以便按元素类型和类而不是按元素名称对元素应用一致的样式。

【讨论】：