css删除线加粗

CSS 删除线加粗

基础概念

CSS（层叠样式表）是一种用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的样式表语言。删除线（text-decoration: line-through）是一种文本装饰，用于在文本上添加一条线，表示该文本已被删除或取消。

类型

基本删除线：使用 text-decoration: line-through; 实现。
加粗删除线：结合 font-weight: bold; 和 text-decoration: line-through; 实现。

应用场景

标记删除内容：在编辑器或文档中标记已删除的内容。
价格折扣：显示原价和折扣价的对比，原价使用删除线。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 删除线加粗示例</title>
    <style>
        .deleted-text {
            font-weight: bold; /* 加粗 */
            text-decoration: line-through; /* 删除线 */
        }
    </style>
</head>
<body>
    <p>原价: <span class="deleted-text">¥100</span></p>
    <p>现价: ¥80</p>
</body>
</html>

参考链接

遇到的问题及解决方法

问题：删除线加粗后，文本显示不正常。原因：可能是由于浏览器兼容性问题或样式冲突。 解决方法：

检查浏览器兼容性：确保使用的浏览器支持 text-decoration 和 font-weight 属性。
避免样式冲突：确保没有其他CSS规则覆盖了这些样式。
使用浏览器前缀：对于一些旧版本的浏览器，可能需要添加前缀来确保兼容性。

.deleted-text {
    font-weight: bold;
    text-decoration: line-through;
    -webkit-text-decoration: line-through; /* Safari 和 Chrome */
    -moz-text-decoration: line-through; /* Firefox */
}

通过以上方法，可以确保在不同浏览器中都能正确显示加粗的删除线。