网站不正常显示新问题出现了

Andy

上个问题一灯大佬给出了解决方案，但是没想到解决了那个问题，却出现了新的问题


https://codecanyon.net/


这个网站的任意一个商品页面，都不正常显示





把一灯大佬的那个CSS自定义关闭之后，就显示正常了


但是关闭了这个CSS自定义，那个网站又显示不正常了

一灯

最大可能性是因为你样式是作用到全网了,  即每个网站都会应用到那样式了, 显然是没必要的对吧.chrome:settings#:~:text=自定义样式文件
百分的自定义样式, 只能排除域名, 不能仅作用于域名.

好吧, 那再提供4种修复解决方案:
一是改用Stylus等容器, 那很好单独适用于那个网站, 简单实在!


二是修改选择器使其尽量变为唯一, 不误伤.
因为  .media 这个class类名太广谱了哈, 可能有的网站也用同样命名.


所以把 .media 改为 .... 但那个网站的 .media  有13个之多哦... 加上 .media>*:not(xxx) 是排除法的,  所以耗时耗力.


三是改用脚本去注入样式来实现吧!
在Tampermonkey/Violentmonkey里新建个脚本,
粘贴下面-保存, 未测(测试还得保存->测试->再回来删脚本...), 不过逻辑上感觉没问题, 放心食用哈

1. // ==UserScript==
   
2. // @name                ridmii样式兼容
   
3. // @author                CentBrowserBBS@一灯
   
4. // @noframes
   
5. // @match                *://ridmii.com/*
   
6. // ==/UserScript==
   
7. 'use strict';
   
8. if (top.location.hostname.indexOf(`ridmii`)>-1)        {
   
9.         !top.document.getElementById(`AndyAndy`)&&top.document.documentElement.insertAdjacentHTML(`beforeend`, `<style type='text/css' id=AndyAndy>
   
10. .media>*:not(.zoom):not(.deferred-media__poster-button)        {
    
11.         display:block;max-width:100%;position:absolute;top:0;left:0;height:100%;width: 100%
    
12. }
    
13. </style>`);
    
14. }

复制代码

注入样式还有其它写法, 但我认为insertAdjacentHTML是最简短的吧
若用在手机浏览器如Via等, 需套个函数才规范有效.
(function()        {上面的代码部分})();

虽然内部逻辑原理都一样, 但纯样式还是建议由专门的样式容器去做吧!


四是如若不折腾, 敬请等待CentBrowser升核更新吧!

Andy

一灯 发表于 2022-3-30 07:18
最大可能性是因为你样式是作用到全网了,  即每个网站都会应用到那样式了, 显然是没必要的对吧.chrome:setti ...

感谢详尽解惑，一灯大佬果然目光如炬，我确实是用在加载自定义样式文件里了





我最喜欢第四个解决方案，哈哈哈哈嗝

centi

敬请等待CentBrowser升核更新吧!