css删除文本阴影选择/突出显示文本(mozilla) [英] css to remove text shadow on select / highlight text (mozilla)

查看:139
本文介绍了css删除文本阴影选择/突出显示文本(mozilla)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我对大多数文字网站使用文字阴影,但当您突出显示/选择文字 - 文字看起来模糊。因此,为了删除文本阴影,我从此处使用此css

I'm using text shadows for most text site wide, but when you highlight / select the text - the text looks fuzzy. So in order to remove the text shadow I use this css from here.

::-moz-selection,
::-webkit-selection,
::selection {
    text-shadow: none;
    background: #333;
    color: #fff;
}

问题是由于某种原因 moz选择

The problem is that for some reason moz-selection doesn't seem to work (anymore?) in mozilla (Firefox).

这是 jsFiddle

推荐答案

似乎问题是由于分组多个css规则(针对供应商特定的css)与:: selection伪元素一起使用。

It seems like the problem was due to grouping multiple css rules (for the vendor specific css) together in conjuntion with the ::selection pseudo element.

我最初认为将每个语句写在单独的

I originally thought that it was sufficient to write each statement on a separate line.

我错了。

所以如果我替换这个代码:

So if I replace this code:

::-moz-selection,
::selection {
    text-shadow: none;
    background: #333;
    color: #fff;
}

..使用此代码:

::-moz-selection
{
    text-shadow: none;
    background: #333;
    color: #fff;
}
::selection {
    text-shadow: none;
    background: #333;
    color: #fff;
}

.... bingo,它工作。

.... bingo, it works.

FIDDLE

FIDDLE

支持也非常好(适用于桌面设备): Caniuse

Support is also very good (for desktop): Caniuse

此外,如果你使用LESS或SASS - 你可以很容易地写一个mixin来绕过repitition。

Also, if you use LESS or SASS - you could easily write a mixin to get around the repitition.

这篇关于css删除文本阴影选择/突出显示文本(mozilla)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆