相同配置的复选框表单元素产生相同的HTML代码，但显示方式不同
我正在简化网站的“注册”页面，以使新用户能够更快，更轻松地注册新用户帐户。
我正在使用Zend和PHP，但我遇到了一个非常奇怪的问题：
- 4个相同创建的复选框
- 前两个显示正常
- 后两个显示格式不完整（如下所述）
尝试了以下内容：
- 在页面上移动工作复选框-它们继续工作。
- 在页面上移动损坏的复选框-它们继续失败。
- 刷新浏览器缓存。
- 重新启动apache
- 进行文本比较以确保所有代码都相同。
这真让我发疯。任何帮助将不胜感激！
PHP表单定义：
$this->addElement('checkbox','user_working1',array(
'label'=>' I am working1',
"class" => "form-control hoverToolTip",
"required" => false,
));
$this->addElement('checkbox','user_working2',array(
'label'=>' 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'=>' 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 <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 <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 <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"> 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"> 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 <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"> 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"> 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个损坏的复选框，其中“标签上方”复选框和“复选框”位于文本框的中央
1 个答案:
答案 0 :(得分：0)
我找到了一些前一段时间编写的自定义CSS。 自定义CSS正在将自定义样式应用于元素名称！
这就是为什么我无法使破碎的字段正常工作以及工作字段保持正常工作的原因。
您可能已经知道，我不是CSS专家，但我将集中精力整理CSS，以便按元素类型和类而不是按元素名称对元素应用一致的样式。
如果我的问题有点令人沮丧，谢谢大家的建议和歉意。
无论如何，现在一切正常。谢谢。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？