CSS自定义下划线样式问题（高手进）

Posted 2023-05-01

如图所示，在页面上用鼠标选中一行文字时，在火狐和ie8下面不会选中下面的背景图片（自定义的下划线），但是在ie6、ie7下却会把背景图片盖住，
下面是我的样式代码：
.zhu

background: url(smallbolang.jpg) repeat-x bottom;
line-height:120px;
padding-bottom:8px!important;
padding-bottom:8px;


<span class="zhu">ocument.selection.createRangeocument.selection.createRangeocument.</span>
希望高手指点下，如何设置让ie6、ie7下选中文字时漏出下面的背景图片（下划线）

第一，你没有设置容器高度，只设置了行高，所以背景图片可以显示的区域只有你行高的部分。
第二，建议多加一层容器，那样比较好控制。
就你现在的代码，改为：
.zhu

float:left;
height:120px;
background: url(smallbolang.jpg) repeat-x bottom;
line-height:120px;
padding-bottom:8px!important;
padding-bottom:8px;

其中line-height可自己设置，让文字在合适的地方。 参考技术A padding-bottom改成0就可以了
但是这样可能会导致文字覆盖到线上面，或者离线过近
这时候就调下line-height了 参考技术B 行高太大了！！ 参考技术C 应该是行高问题

CSS - 原始与自定义样式表 - 覆盖样式的正确方法

【中文标题】CSS - 原始与自定义样式表 - 覆盖样式的正确方法

【英文标题】：CSS - original vs. custom style sheet - correct way to overwrite styles

【发布时间】：2015-05-04 23:05:11

【问题描述】：

我正在使用一个 wordpress 主题，它使用自己的按钮样式。以下几行是 CSS 的一部分：

.button 
background: #333 !important;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#222))  !important;
background: -moz-linear-gradient(0% 0% 270deg,#333, #222) !important;

我正在使用自己的自定义样式表，我想覆盖这些样式，但我需要做的就是更改背景颜色并移除渐变。

如果我只保持线条改变样式表中的背景颜色，如下所示：

.button 
background: #353535 !important;

那么渐变仍在显示，因为它在原始样式表中。

如果我将渐变线设置为background: none;，那么它将影响我更改颜色的第一行，因此不会显示任何内容。

所以我已经这样做了：

.button 
    background: #353535 !important;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#), to(#))  !important;
    background: -moz-linear-gradient(0% 0% 270deg,#, #) !important;
    

我删除了渐变色。

它有效，但这可能不是这样做的方法。

是否有适当的方法来删除自定义 css 样式表中的渐变样式？

【问题讨论】：

"那么渐变仍在显示，因为它在原始样式表中" 这不应该发生，除非在您的自定义样式表之后加载原始样式表。

我现在已将其从自定义样式表中删除，并且似乎一切正常。嗯，不确定，之前一定是做错了什么。感谢您指出。

【参考方案1】：

从 HTML/CSS 的角度来看：渐变不是颜色而是图像。

因此只需删除背景图像。

background-image: none;