2

我有这个

.strike{
    text-decoration: line-through;
}

每次disable()调用 my 时，它都会禁用<option>my 中的 s<select>并添加此类，但它在 IE 上不起作用。是的，我<option>的 s 被禁用得很好，但 IE 上的文本装饰失败。解决方法是什么？谢谢。

编辑：我刚刚发现 text-decoration: line-through 在 Chrome 上也不起作用。

4

6 回答 6

2

一般来说，option元素在样式方面有很多限制，因为它们的渲染仍然主要基于系统中的内置例程，而这些例程通常不能用 CSS 控制。Overstriking 通常不起作用，因为您可以使用简单的静态示例进行测试<select><option style="text-decoration: line-through">Hello world</select>。（出于好奇，Firefox 使用 line through，但不是在初始状态下最初选择的选项上。）

考虑使用替代方法。如果无法选择一个选项，为什么不直接删除它呢？（我的意思是用 JavaScript 删除元素。用 CSS 隐藏它效果不好。）

或者，将其disabled属性设置为true。这将阻止它被选中，并在流行的浏览器上使用灰色文本显示。

于 2012-10-11T21:16:04.593 回答
2

select样式元素的选择很少。这是一个支持网格，显示了您的可用选项（和限制）。

您最好以其他方式模拟“选择”（例如），而不是尝试使用 CSS 设置选择表单控件的样式。

于 2012-10-11T21:08:31.827 回答
2

我的问题是 text-decoration: line-through; 不在IE中工作。我使用简写在单个声明中设置一个或多个单独的文本装饰值（例如文本装饰：通过虚线蓝色的线）。我发现它还不支持。 https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration

如果您需要下划线/穿线的另一种颜色，请使用额外的 span 元素。

<span style="color:red; text-decoration: line-through;"><span style="color: blue; text-decoration: none">Try this!</span></span>

不确定这是否会对您的情况有所帮助。

于 2018-04-03T07:58:04.973 回答
0

您可能会变得棘手并为文本 div 添加一个像素背景。这至少是面向未来的并且适用于所有浏览器。

于 2012-10-11T20:40:52.190 回答
-1

在这里，试试这个：

<p>Bla bla bla <span class="strike">RAAAAAA!</span></p>

和：​</p> 

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;
}

编辑：哦，它是一个选择。没关系。

于 2012-10-11T21:11:48.360 回答
-3

来，试试这个

<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++) {
            var c = str.charAt(i);
            var r = c+strikeKind;
            result += r;
        }
    return result;
}
</script>
于 2014-08-21T16:55:08.597 回答