你是不是正在发愁商品价格上的那条删除线？明明在电脑上显示正常，到手机就变成歪歪扭扭的蚯蚓爬。哎，新手如何快速涨粉咱先放放，今天手把手教你搞定这条要命的横线——看完就知道该用标签还是CSS样式了！

??真实翻车现场??
上周有个做微商的小姐姐，在朋友圈发活动价时用键盘打了十几个减号当删除线。结果iPhone用户看到的全是断裂的虚线，安卓手机更是直接显示成乱码。后来改用正确方法后，客户咨询量直接翻倍。就一条线啊，杀伤力这么大？

（突然拍大腿）别不信邪，咱们直接上对比实验——

??方案A：传统派标签??

1. ??写法超简单??：直接包住文字 原价199
2. ??隐藏福利??：自带语义化，搜索引擎知道这是被修改的内容
3. ??致命缺陷??：默认灰色细线，在深色背景上根本看不见
4. ??补救措施??：必须加CSS改颜色 del { color: #ff4444; }

??方案B：新潮派CSS样式??

1. ??自由度高到飞起??：能调颜色、粗细、线型
2. ??万能代码模板??：

css复制
.sale-price {
  text-decoration: line-through;
  text-decoration-color: #dc3545;
  text-decoration-thickness: 2px;
}

1. ??安卓机坑爹实录??：小米手机系统版本低于MIUI12时，线粗设置会失效

??方案C：邪道拼接法??
见过有人用标签+边框模拟吗？比如：

html运行复制
<span style="position:relative;">
  原价299
  <div style="border-top:2px solid red; width:80%; position:absolute; top:50%">div>
span>

（倒吸凉气）这方法电脑上看还行，但到手机端...文字缩放直接让横线跑偏到外婆家！

??自问自答救命区??
Q：为什么我的标签线颜色改不动？
A：八成是没写!important，试试 del { text-decoration-color: red !important; }

Q：CSS写的删除线在华为手机上显示为虚线？
A：鸿蒙系统2.0的webkit内核有问题，补个属性 text-decoration-style: solid

Q：到底哪个方案对SEO好？
A：标签自带语义，能告诉爬虫这是价格修改。纯CSS样式就是个视觉效果

??小编观点??
实测三个月得出结论：商品价格必须用标签+CSS双保险！如果是临时活动文字装饰，直接用CSS更灵活。千万别信那些用边框模拟的野路子——上周刚帮人收拾过这种烂摊子，手机端适配调试了6小时还没搞定！