Van Toll的<cross>三振出局失败
在删除的文本中，我得不到预期的决定性X。
这是我的测试代码。“style”中的所有东西都是直接从VanToll复制过来的，但它不会把东西划掉。显然，关于::css单词有一些我不理解的东西。我遗漏了什么？
<!DOCTYPE html><html lang="en"><head>
<title>X-out test</title>
<meta charset="UTF-8">
<style>
/* Emphatic X-shaped strike-out */
/* https://www.tjvantoll.com/2013/09/12/building-custom-
text-strikethroughs-with-css/ */
.cross {
position: relative;
display: inline-block;
}
.cross::before, .cross::after {
content: '';
width: 100%;
position: absolute;
right: 0;
top: 50%;
}
.cross::before {
border-bottom: 2px solid red;
-webkit-transform: skewY(-10deg);
transform: skewY(-10deg);
}
.cross::after {
border-bottom: 2px solid red;
-webkit-transform: skewY(10deg);
transform: skewY(10deg);
}
</style> </head> <body>
<h3><cross>This section-header should be struck out!</cross>
</h3>
</body> </html> VanToll建议“如果你加入了一个直播的jsFiddle和/或你尝试让它工作的jsBin，这也会有很大的帮助”，但我不知道这些js是什么……操作是。(我是用HTML编写学术书籍的作者，而不是真正的程序员。)
旧的备用's‘在上面出现'cross’的地方起作用，但有一半的时间它显示为一条1像素线，正好在文本的较低衬线上方，在那里它可能被视为混乱的下划线。
顺便说一句，我是在2013年的27英寸-iMac上，用火狐浏览器在高塞拉10.13.6下的BBEdit上写的，尽管其他六个浏览器也能用。看看http://electromontis.net/evoligion/_D/D15.shtml#17就能看到这种糟糕的三振出局的例子。
回答 3
Stack Overflow用户
发布于 2018-07-24 06:42:36
尝试按如下方式调整代码：
<h3 class="cross">This section-header should be struck out!</h3>请注意，添加了class="cross"，删除了<cross>和</cross>
Stack Overflow用户
发布于 2018-07-24 06:42:34
你的css代码像一个div标签，但是你的html代码不匹配。
尝尝这个
<div class="cross">This section-header should be struck out!</div>Stack Overflow用户
发布于 2021-06-22 06:02:04
上面/下面的修复在我整理好之后的3年里都运行得很好。(顺便说一下，我现在使用的是macOS Catalina10.15.7和BBEdit 13.5.6。)我使用删除线代码来强调HTML书中描述不存在的特性的一章的目录中的某些部分(原始查询中的html链接不再有效)。ToC是一个无序列表，采用3栏“报纸”格式，有一天这6个被划掉的条目完全是空白的。我已经有一段时间没有看过这一章了，所以我不知道这是什么事情，什么时候发生的。
我现在所能做的最好的事情就是让一个这样的删除来删除ToC中的第一个条目。
报纸代码：
.newsp {
padding-left; 1.5mm;
column-gap; 2mm;
column-count: 3;
column-width: 33%;
line-height: 2.3;
font-size: 10pt;
font-family: Arial, Verdana, sans-serif;
list-style-type: none;
border: black solid 1px:
}划线代码：
.x {
position: relative;
display; inline-block;
}
.x::after {
content:"";
width: 14%;
position: absolute;
left: 1.05in;
top: 53%;
border-top: 2px solid red;
-webkit-transform: skewY(-4deg);
moz-webkit-transform: skewY(-4deg);
ms-webkit-transform: skewY(-4deg);
o-webkit-transform: skewY(-4deg);
transform: skewY(-4deg);
}所有这些都集中在ToC的中间：
<li><a href-"#y27"><span class="x">Section 11</span></a>
<li><a href-"#y28"><span class="x">Section 12</span></a>
<li><a href-"#y29"><span class="x">Section 13</span></a> 但它所做的就是在列表中保留空行。
更令人费解的是，"x“这个名字曾经用得很好。现在我得到了一行，具有正确的角度、长度和颜色，我可以说服它删除列表第一列中的第一个条目-- ，而不需要在HTML代码中特别提到"x“(在我删除了对”x“的所有调用之后)。如果我重命名它，比如说，"xx"，我得到的只是空格。仔细搜索HTML代码中任何位置键入的"x“都没有结果。当它被命名为"x“时，我可以调整它的角度，颜色等细节，但我不能将它移动到它在报纸桌上的适当位置。我知道我的web服务Powweb重写了我的HTML代码，尽管他们似乎不想谈论这个，但我需要保证我没有错过CSS和HTML的一些新东西。或者做了一些我看不见的愚蠢的事情。
--费伦20210622 00:00:15
https://stackoverflow.com/questions/51488038
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号