表格中图例周围的边框不显示

Posted 2023-02-16

【中文标题】表格中图例周围的边框不显示

【英文标题】：Border around legend in form does not show

【发布时间】：2011-08-20 13:02:26

【问题描述】：

我有一个简单的 CodeIgniter 视图，即使我使用了 fieldset 和 legend 标签，它也拒绝在表单周围显示边框。

我不相信 CSS 会在任何地方覆盖它，但此时我什至不知道如何检查（如果此陈述为真，则将相当大的 CSS 拆分为多个文件）。

这是简单的 html。救命！

<fieldset>
<legend>Log In</legend>
<?php

echo form_open('form/login');
echo form_input('email', set_value('email', 'Email'));
echo form_password('password', set_value('password', 'Password'));
echo form_submit('submit', 'Log In');
echo form_close();

?>
</fieldset>

【问题讨论】：

欢迎来到 Stack Overflow。我想花点时间给你一个高五（和一个+1）提交一个格式良好的帖子作为你的第一个问题。 :) （你会惊讶这是多么罕见）

【参考方案1】：

问题是您的 html 无效。

<fieldset> 标签在你的<form>

<?=form_open('form/login');?>
<fieldset>
   <legend>Log In</legend>
   <?
     echo form_input('email', set_value('email', 'Email'));
     echo form_password('password', set_value('password', 'Password'));
     echo form_submit('submit', 'Log In');
   ?>
</fieldset>
<?=form_close();?>

如果这不能为你解决问题 （我想它会的）：

使用Google Chrome 或Firebug Extension for Firefox，您可以检查页面上的元素，方法是右键单击它并选择Inspect Element。这将带你进入 dom explorer，你将能够看到所有 CSS 样式被应用到一个对象以及它们来自哪里。这应该可以帮助您缩小可能会覆盖默认视觉效果的 CSS 样式。 （并确认/否认这种冲突的存在）。

【讨论】：

谢谢阿伦。将字段集放在表单中并没有这样做，但是使用 Firebug，我能够在模板的 reset.css 文件中找到导致字段集边界被清零的罪魁祸首。删除了 reset.css 中对 fieldset 的引用，现在显示边框。

【参考方案2】：

而不是在重置中删除它，您应该先加载重置，然后在您的定制 CSS 中覆盖它。如果你开始搞乱重置，你以后可能会给自己带来麻烦