fieldset边框样式无效解决方案

最新推荐文章于 2025-06-15 23:10:10 发布

Fantastic_HQ

最新推荐文章于 2025-06-15 23:10:10 发布

阅读量6.7k

点赞数 3

CC 4.0 BY-SA版权

文章标签： bootstrap 解决方案 fieldset

本文链接：https://blog.youkuaiyun.com/qq_27445903/article/details/78173228

前端专栏收录该内容

2 篇文章

订阅专栏

本文解决了一个因浏览器版本过低导致的样式显示问题。通过调整fieldset和legend元素的样式，解决了由Bootstrap引起的显示异常，使标题和分割线正常显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题重现

这里写图片描述

原因分析

浏览器版本太旧了
由于bootstrap重写了fieldset和其中的legend，那么样式就会变成了”标题”下面一条分割线

解决方案

在使用到该fieldset的时候加上下面样式

    <style>
        fieldset {
            padding: .35em .625em .75em;
            margin: 0 2px;
            border: 1px solid silver;
        }

        legend {
            padding: .5em;
            border: 0;
            width: auto;
        }
    </style>