blocks|key|2312295|text|你可以变得棘手一些，在文本div中添加一个像素的背景。这至少是面向未来的，可以在所有浏览器上运行。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2312296|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>You could get tricky and add a one pixel background to the text div. This would at least be future-proof and work on all browsers.</p>


blocks|key|3384676|text|设置select元素样式的选项很少。这是一个显示可用选项(和限制)的support+grid。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3384677|你最好用另一种方式(example)来模拟“选择”，而不是尝试用CSS设置一个选择窗体控件的样式。|3384678|entityMap|0|LINK|mutability|MUTABLE|url|http://www.electrictoolbox.com/style-select-optgroup-options-css/|1|http://cssglobe.com/custom-styling-of-the-select-elements/^0|2|6|Y|C|0|0|A|7|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@$9|U|A|V|1|W]]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@$9|Y|A|Z|1|10]]|E|$]]|$1|H|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]|P|$5|K|L|M|E|$N|Q]]]]

<p>There very few options for styling <code>select</code> elements. Here's a <a href="http://www.electrictoolbox.com/style-select-optgroup-options-css/" rel="nofollow">support grid</a> that shows your available options (and limitations).</p>

<p>You would probably be better off simulating the 'select' some other way (<a href="http://cssglobe.com/custom-styling-of-the-select-elements/" rel="nofollow">example</a>), rather than trying to style a select form control using CSS.</p>


blocks|key|400284|text|这里，试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|400285|<p>Bla+bla+bla+<span+class="strike">RAAAAAA!</span></p>|code-block|syntax|javascript|400286|和：​|400287|span.strike{
++++position:+relative;
++++text-align:+center;
++++z-index:+1;++++
}

span.strike:before+{
++++border-top:+1px+solid+#000;
++++content:"";
++++width:+100%25;
++++position:+absolute;
++++top:+50%25;+
++++z-index:+-1;
}|400288|编辑:哦，这是一个选择。不要紧。|400289|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Here, try this: </p>

<pre><code>&lt;p&gt;Bla bla bla &lt;span class="strike"&gt;RAAAAAA!&lt;/span&gt;&lt;/p&gt;
</code></pre>

<p>and:
​</p>

<pre><code>span.strike{
    position: relative;
    text-align: center;
    z-index: 1;    
}

span.strike:before {
    border-top: 1px solid #000;
    content:"";
    width: 100%;
    position: absolute;
    top: 50%; 
    z-index: -1;
}
</code></pre>

<p>edit: oh its a select. nevermind.</p>


blocks|key|397204|text|通常，option元素在样式方面有很多限制，因为它们的呈现在很大程度上仍然基于系统中的内置例程，而这些例程通常不能通过CSS进行控制。覆盖通常不起作用，因为您可以使用一个简单的静态示例<select><option+style="text-decoration:+line-through">Hello+world</select>进行测试。(出于好奇，Firefox在初始状态下使用了连线，而不是初始选择的选项。)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|397205|考虑使用另一种方法。如果无法选择某个选项，为什么不直接将其删除？(我的意思是用JavaScript删除元素。用CSS隐藏它不能很好地工作。)|397206|或者，将其disabled属性设置为true。这将阻止它被选中，并且它将在流行的浏览器上使用灰色文本显示。|397207|entityMap^0|3|6|2K|22|0|0|5|8|I|4|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|J|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|K|$]]

<p>Generally, <code>option</code> elements have many limitations in styling, since their rendering is still largely based on built-in routines in systems, and those routines are often not controllable with CSS. Overstriking does not usually work, as you can test with a simple static example <code>&lt;select&gt;&lt;option style="text-decoration: line-through"&gt;Hello world&lt;/select&gt;</code>. (As a curiosity, Firefox uses line through, but not on the initially selected option in the initial state.)</p>

<p>Consider using an alternative approach. If an option cannot be selected, why not just remove it? (I mean deleting the element with JavaScript. Hiding it with CSS does not work well.)</p>

<p>Alternatively, set its <code>disabled</code> property to <code>true</code>. This will prevent it from being selected, and it will get displayed using gray text, on popular browsers.</p>


blocks|key|2312323|text|来，试试这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2312324|<select>
++++<option+selected>+Size+-+</option>
++++<option+class="disabledoption">Short+Option</option>
++++<option+class="disabledoption">This+Is+</option>
++++<option+class="disabledoption">dssdsd+Is+</option>
++++<option+class="disabledoption">yes+</option>
++++<option+class=>ertyu+</option>
++++<option+class=>gsdgsdf+</option>
</select>

<script+type="text/javascript">
jQuery(document).ready(function()+{
++++uni+=+'\u0336';
++++jQuery('.disabledoption',+this).each(function(index,+element)+{
++++++++uni+=+'\u0336';
++++++++var+result+=+strikeString(jQuery(this).html(),+uni);
++++++++jQuery(this).html(result);
++++});
++++});
++++function+strikeString(str,+strikeKind)+{
++++++++var+result+=+'';
++++++++for+(var+i+=+0;+i+<+str.length;+i%2B%2B)+{
++++++++++++var+c+=+str.charAt(i);
++++++++++++var+r+=+c%2BstrikeKind;
++++++++++++result+%2B=+r;
++++++++}
++++return+result;
}
</script>|code-block|syntax|javascript|2312325|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Here, Try this</p>

<pre><code>&lt;select&gt;
    &lt;option selected&gt; Size - &lt;/option&gt;
    &lt;option class="disabledoption"&gt;Short Option&lt;/option&gt;
    &lt;option class="disabledoption"&gt;This Is &lt;/option&gt;
    &lt;option class="disabledoption"&gt;dssdsd Is &lt;/option&gt;
    &lt;option class="disabledoption"&gt;yes &lt;/option&gt;
    &lt;option class=&gt;ertyu &lt;/option&gt;
    &lt;option class=&gt;gsdgsdf &lt;/option&gt;
&lt;/select&gt;

&lt;script type="text/javascript"&gt;
jQuery(document).ready(function() {
    uni = '\u0336';
    jQuery('.disabledoption', this).each(function(index, element) {
        uni = '\u0336';
        var result = strikeString(jQuery(this).html(), uni);
        jQuery(this).html(result);
    });
    });
    function strikeString(str, strikeKind) {
        var result = '';
        for (var i = 0; i &lt; str.length; i++) {
            var c = str.charAt(i);
            var r = c+strikeKind;
            result += r;
        }
    return result;
}
&lt;/script&gt;
</code></pre>


blocks|key|5496083|text|我的问题是文本修饰:行通过；在IE中不起作用。我使用速记在单个声明中设置一个或多个单独的文本修饰值(例如，文本装饰:通过虚线的蓝色).I发现它还不受支持。https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|5496084|如果您需要另一种颜色作为下划线/划线，请使用额外的span元素。|5496085|​|5496086|<span+style="color:red;+text-decoration:+line-through;"><span+style="color:+blue;+text-decoration:+none">Try+this!</span></span>|code-block|syntax|javascript|5496087|5496088|不确定这对你的情况是否有帮助。|5496089|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration^0|25|1S|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|12|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|13|8|@]|9|@]|C|$K|L]]|$1|M|3|G|5|6|7|14|8|@]|9|@]|C|$]]|$1|N|3|O|5|6|7|15|8|@]|9|@]|C|$]]|$1|P|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|Q|$R|$5|S|T|U|C|$V|W]]]]

<p>My issue was text-decoration: line-through; not working in IE. I was using shorthand for setting one or more individual text-decoration values in a single declaration (e.g. text-decoration: line-through dashed blue).I found it is not supported yet.
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration</a></p>

<p>If you need another color for your underline/line-through use an additional span element.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span style="color:red; text-decoration: line-through;"&gt;&lt;span style="color: blue; text-decoration: none"&gt;Try this!&lt;/span&gt;&lt;/span&gt;</code></pre>
</div>
</div>
</p>

<p>Not sure if this will help you in your case.</p>


<p>I have this</p>

<pre><code>.strike{
    text-decoration: line-through;
}
</code></pre>

<p>and every time my <code>disable()</code> is called, it will disable the <code>&lt;option&gt;</code>s from my <code>&lt;select&gt;</code> and add this class but it does not work on IE. Yes, my <code>&lt;option&gt;</code>s are disabled just fine but the text-decoration fails on IE. What is the workaround for this? Thanks.</p>

<p>Edit: I just found out that text-decoration: line-through does not work also on Chrome.</p>


Text-decoration: line-through not working on IE?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有这个.strike{    text-decoration: line-through;}每次调用我的disable()时，它都会从我的<select>中禁用<option>，并添加这个类，但它在IE上不起作用。是的，我的<option>被禁用了，但是IE上的文本装饰失败了。解决此问题的方法是什么？谢谢。编辑:我刚...

问文本装饰:直通不能在IE上工作吗？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问文本装饰:直通不能在IE上工作吗？EN