Question

我在桌面浏览器上查看this website时出现问题。它们具有响应/流畅的设计，当浏览器宽度小于990像素时显示移动菜单按钮而不是水平导航栏。

由于我使用的是具有125％缩放率的Firefox，因此我的桌面浏览器的有效宽度小于990像素。

我查看了CSS代码并找到了该行。如何使用Stylish，Greasemonkey或其他方法自动替换＆＃34; 990px＆＃34;的最大宽度值？使用＆＃34; 800px＆＃34;？

@media (max-width:990px) { ... }

我在Windows 7上使用Firefox 23.

编辑：根据目前为止的评论，我需要用我自己的自定义CSS文件替换他们的CSS文件。那么如何使用Greasemonkey替换href（看似非静态文件名）？

<link rel="stylesheet" type="text/css" href="http://d1h60c43tcq0zx.cloudfront.net/static/css/versioned/global-cdn-ac243f54ab6bb9637fcc5fa32f8b514d.css"></link>

Answer 1

这样做的一种方法是：

使用<link>中文字的常量部分查找有问题的href。
记录该链接的href。
删除该链接。
使用GM_xmlhttpRequest()再次获取文件（希望它已缓存）。
使用正则表达式修复已获取的CSS。
使用GM_addStyle()添加固定的CSS。

这是一个完整的Greasemonkey脚本，用于说明该过程：

// ==UserScript==
// @name     _Replace bad CSS link
// @include  http://www.fleaflicker.com/nfl/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @grant    GM_addStyle
// @grant    GM_xmlhttpRequest
// ==/UserScript==

var badCSS  = $("link[href*='global-cdn-']");
var badURL  = badCSS.attr ("href");

badCSS.remove ();

GM_xmlhttpRequest ( {
    method:     "GET",
    url:        badURL,
    onload:     function (rsp){
        var betterCSS   = rsp.responseText.replace (
            /max-width:990px/g, "max-width:500px"
        );

        GM_addStyle (betterCSS);
    }
} );

注意：

为了更快/更好的性能，如果CSS不经常更改，请手动编辑它并将其保存在您安装脚本的同一文件夹中。然后使用GM getResourceText()获取CSS，而不是GM_xmlhttpRequest()。
如果页面“闪烁是一个烦恼，由于启动延迟，这是一个完整的其他问题，可能可以用@run-at document-start和变异观察者解决。

Answer 2

如果向Firefox添加Stylish，则可以为特定域添加样式。我经常发现我需要包含许多样式的!important来识别它们。

Firefox的另一个选择是直接编辑userContent.css文件。你可以轻松谷歌“userContent.css firefox windows7”来找到它的位置。（我用的是Mac。）

如何使用Stylish或Greasemonkey替换@media（max-width）？

2 个答案: