如何在 Jquery Mobile 中删除基本链接中的阴影？

Posted 2023-05-09

【中文标题】如何在 Jquery Mobile 中删除基本链接中的阴影？

【英文标题】：How to remove drop shadow in basic links in Jquery Mobile?

【发布时间】：2012-12-04 21:34:01

【问题描述】：

<div data-role="page" style="background:#000">
    <a href="http://google.com">test</a>
</div>

如您所见：http://jsfiddle.net/KCqqN/

Jquery Mobile 似乎添加了白色阴影，如何消除？

【参考方案1】：

在您的样式表中（确保它位于 jQuery 移动样式表下方）

只需自己设置文本阴影，即可。

.ui-body-c, .ui-overlay-c text-shadow:0 0 0;

在 jsFiddle 中，它会在之后加载 jquery 移动 css，所以如果你在其中添加一个额外的标签（或者使用 !important，最好不要这样做）它会胜过它。

body .ui-body-c, body .ui-overlay-c text-shadow:0 0 0; // more specificity

http://jsfiddle.net/KCqqN/2/

【参考方案2】：

非常简单！

在您的 CSS 中的所有内容之前添加以下代码：

* 
    text-shadow: none !important;

【讨论】：

谢谢，帮助！ JQuery Mobile 中的这个影子太烦人了，他们不应该默认设置它！

不客气，很高兴这行代码对您有所帮助。

【参考方案3】：

我建议在 head 标记中设置您自己的链接 css，然后添加“text-shadow=none !important;”标记以确保您覆盖 jquery 所做的任何事情。而且因为 !important 会覆盖浏览器的可访问性设置，所以我还建议将您的文本设置为非常暗和大而背景非常浅，反之亦然，以免惹恼您的可访问性设置不起作用的色盲/视力障碍用户