改变删除线的垂直位置？
Posted
技术标签:
【中文标题】改变删除线的垂直位置？【英文标题】：Change vertical position of strike-through? 【发布时间】：2011-01-30 23:52:44 【问题描述】：我正在应用删除标记：
<s>$5,000,000</s>
但是这条线太低了。它大约是从底部的 1/4，而不是从中间穿过。有什么办法可以修改它，让它在中间多一点？
【问题讨论】：
strike 已弃用，css 有text-decoration:line-through;
在html5 文档中，对于此文本（已更改的价格），the <s> tag 是完全合适的，并且比内联 CSS（如 <span style="text-decoration: line-through;">）更有用。不过，The <strike> tag 确实已被弃用。
对我有帮助的答案***.com/questions/2539207/…
【参考方案1】：
您不能使用罢工标签或text-decoration:line-through 样式来做到这一点。线位置是内置的。您可以为此推出自己的风格，但这将是一个巨大的 PITA。
【讨论】：
感谢您的澄清。我在互联网上找不到任何关于控制位置的信息……现在我知道为什么了！【参考方案2】：我已经编写了这段代码，它可以让您完全控制删除线的位置和样式：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css">
.mark
border-bottom: 1px solid #000;
top: -9px; /* Tweak this and the other top in equal, but opposite values */
position: relative;
.offsetMark
position: relative;
top: 9px; /* Tweak this and the other top in equal, but opposite values */
</style>
</head>
<body>
<div>
<p class="strikethrough">This is an <span class="mark"><span class="offsetMark">example</span></span> of how I'd do it.</p>
</div>
</body>
</html>
【讨论】：
非常好的解决方案 - 只是有点太复杂和混乱，所以我不会在这里应用它。行位置在 Windows 机器上似乎很好。只是 Mac 机器发生了一些奇怪的事情。 这对绕过不支持Cufon text-decoration很有帮助。 在 IE8 中，“示例”被切成两半。只有文本“示例”的上半部分可见，然后是实线，然后是空格。 IE8对我来说很好，但IE7似乎忽略了定位。我想我可以用它来修复 Firefox，这就是我来这里的目的。 此外，该行位于文本后面，如果您希望罢工具有不同的颜色，则相关。【参考方案3】：没有罢工标签，不。它是浏览器渲染引擎的一部分。对我来说（在 Chrome 中），这条线在中间上方呈现。
【讨论】：
【参考方案4】：11 年后，这任务相当简单：
s
text-decoration: none;
position: relative;
s::before
content: '';
width: 100%;
position: absolute;
right: 0;
top: calc( 50% - 1.5px );
border-bottom: 3px solid rgba(255,0,0,0.8);
old price: <s>$99.95</s>【讨论】：
【参考方案5】：此解决方案允许填充，并使用 csss line-through 属性 它适用于 firefox，而且 chrome/safari 无论如何都是正确的。
div.hbPrice span.linethroughOuter
padding: 0 10px 0 0;
text-decoration: line-through;
position: relative;
div.hbPrice span.linethroughInner
position: relative;
/* Firefox only. 1+ */
div.hbPrice span.linethroughOuter, x:-moz-any-link bottom: 2px;
div.hbPrice span.linethroughInner, x:-moz-any-link top: 2px;
标记类似于...
<div class="hbPrice"><span class="linethroughOuter"><span class="linethroughInner">£1,998</span></span> £999</div>
另一种解决方案是添加线条的背景图片，并使其与文本颜色相同。
【讨论】：
【参考方案6】：你可以这样做：
<div class="heading"><span>Test heading</span></div>
.heading
position: relative;
text-align:center;
.heading:before
background-color: #000000;
content: "";
height: 1px;
left: 0;
position: absolute;
right: 0;
top: 50%;
.heading span
background-color: #fff;
display: inline-block;
padding: 0 2px;
position: relative;
text-align: center;
http://codepen.io/anon/pen/cLBls
【讨论】：
有趣，但与问题无关。【参考方案7】：2021 解决方案
通常，您会使用text-decoration: line-through，但您目前无法更改“line-through”行的位置。
但幸运的是，由于新的 CSS 属性 text-decoration-offset，您可以更改“下划线”的位置。
这是它的工作原理：
.strike
text-decoration: underline;
text-underline-offset: -.4em;
<p>Only <span class="strike">$199.99</span> $99.99!</p>虽然您可能会注意到这条线似乎有点波涛汹涌。这是由于相对较新的text-decoration-skip-ink 试图在会覆盖文本的地方隐藏下划线。它非常适合下划线，但作为删除线失败。
幸运的是，我们可以关闭该功能，以及一些额外的漂亮颜色和厚度属性，这是最终结果：
.strike
text-decoration: underline;
text-underline-offset: -.4em;
text-decoration-skip-ink: none;
text-decoration-color: red;
text-decoration-thickness: 2px;
color: gray;
<p>Only <span class="strike">$199.99</span> $99.99!</p>浏览器支持很广泛，目前 Safari 除外。
【讨论】：
以上是关于改变删除线的垂直位置？的主要内容，如果未能解决你的问题，请参考以下文章