type属性在<ul>标签上早已被HTML5废弃,主流浏览器均忽略它;应使用CSS的list-style-type替代,支持disc、circle、square等值,或用::marker伪元素自定义符号。

ul 的 type 属性在现代 HTML 中已失效
直接说结论:type 属性在 <ul> 标签上**早已被 HTML5 废弃**,主流浏览器(Chrome、Firefox、Safari、Edge)均忽略它。哪怕你写成 <ul type="square">,页面也不会显示方框符号——这不是兼容性问题,是标准层面的移除。
用 CSS 的 list-style-type 替代 type 属性
真正生效且可控的方式是用 CSS 控制 list-style-type。它支持的值比旧 type 更丰富,也更可靠:
-
disc:实心圆点(默认) -
circle:空心圆圈 -
square:实心方块 -
none:无符号 - 还支持
decimal、lower-alpha等(虽属<ol>常用,但也可用于<ul>)
写法示例:
<ul style="list-style-type: square;"> <li>第一项</li> <li>第二项</li> </ul>
或用 class 更规范:
<style>
.sq-list { list-style-type: square; }
</style>
<ul class="sq-list">...</ul>
想自定义符号?用 list-style-image 或 ::marker
如果内置值不够用(比如要小图标、SVG、特殊字体符号),有两个主流选择:
-
list-style-image:指定图片 URL,但缩放和对齐难控,且不支持响应式尺寸 -
::marker伪元素(推荐):CSS 新标准,支持设置颜色、字体、内容,兼容性已覆盖 Chrome 86+/Firefox 68+/Safari 15.4+
示例:ul.custom li::marker { content: "■ "; color: #007bff; }
注意 ul 和 li 的样式继承与重置陷阱
容易踩的坑:
- 某些 CSS 框架(如 Bootstrap)会全局重置
list-style-type为none,导致你的square不生效——检查 computed styles,优先级可能被覆盖 - 给
<li>直接设list-style-type无效,必须作用于<ul>或其父容器 - 用
list-style: none清除符号后,若需手动加符号(比如用::before),记得调整padding-left避免文字顶到左边
复杂点在于:符号渲染依赖字体、系统、DPI,square 在某些中文字体下可能显得过小或偏移;真要像素级一致,::marker + 自定义 content 是目前最稳的路径。

















