谷歌浏览器 替换css样式?谷歌浏览器 替换css样式怎么设置
大家好,今天来为大家分享谷歌浏览器 替换css样式的一些知识点,和谷歌浏览器 替换css样式怎么设置的问题解析,大家要是都明白,那么可以忽略,如果不太清楚的话可以看看本篇文章,相信很大概率可以解决您的问题,接下来我们就一起来看看吧!
本文目录
一、谷歌浏览器不支持CSS设置小于12px的文字怎么办
在最新版的谷歌里。已经不在支持这个属性啦
谷歌浏览器Chrome是Webkit的内核,有一个-webkit-text-size-adjust的私有 CSS属性,通过它即
可实现字体大小不随终端设备或浏览器影响。
-webkit-text-size-adjust:none;
如何让谷歌浏览器支持小于12px的字体
经常与网页打交道的攻城师,应该都知道。谷歌不支持小于12px的字体。
比如。修改浏览器配置。修改浏览器语言。
但作为一个WEB,我们无法修改用户的浏览器。这时候就出现了
html{-webkit-text-size-adjust:none;}
但是,在最新版的谷歌里。已经不在支持这个属性啦。所以。这个属性。。。。
而我们用到的就是transform:scale()
<p>我是一个小于12PX的字体</p>
放在浏览器预览。会发现最新版谷歌已经不在支持。还是12px
-webkit-transform:scale(0.8);//0.8位缩放倍数,具体自己根据实际需求修改
p{font-size:10px;-webkit-transform:scale(0.8);}
但是,如果,这个属性会把真个p的属性都缩放。如果我有背景呢?我有边框呢?都会被缩小!
<p><span>我是一个小于12PX的字体</span></p>
span{-webkit-transform:scale(0.8);}
但是你会惊讶发现,不可以。实际上,是以为-webkit-transform:scale(0.8);只能缩放可以定义宽高
的元素,而span是行内元素,不可以
span{-webkit-transform:scale(0.8); display:inline-block}
为什么定义 display:inline-block而不是 display:block?
转为block就独占一行啦。如果我后面紧追怎么办元素。所以转换为inline-block
放在谷歌浏览器里,运行一下会发现支持字体变小啦~~放心啦。。。
但是你会发现。会存在一定的边距。貌似margin或者padding的间距。这就是缩放存在问题。原来的位
所以,要对应修改margin了。定义为负的。。
NO,我们还需要去兼容opera!!!
为什么?opera现在最新版也是webkit内核啦~~~苦逼的工程师呀~
本来就是10px的字体了。然后在缩放,不敢想象了!
span{-webkit-transform:scale(0.8);-o-transform:scale(1); display:inline-block}
放心opera还是支持他的私有前缀的。
<title>无标题文档</title>
span{-webkit-transform:scale(0.8);-o-transform:scale(1); display:inline-block}
<p><span>我是一个小于12PX的字体</span></p>
为了方便,我们最好定义为一个类,方便我们每次调用
<title>无标题文档</title>
.shrink{-webkit-transform:scale(0.8);-o-transform:scale(1); display:inline-block}
<p><span class="shrink">我是一个小于12PX的字体</span></p>
二、如何在浏览器上修改网页内容
1、在浏览器中修改网页的内容有多种方法,以下是其中的两种:
2、使用浏览器开发者工具(DevTools):各种现代浏览器都内置了开发者工具,可以通过在网页上右键点击并选择“检查”来打开。在 Elements标签下,可以直接对网页的 HTML结构、CSS样式和 JavaScript代码进行编辑和修改,实时看到修改后的效果。
3、使用浏览器插件(Extension):一些浏览器插件也提供了修改网页内容的功能,如 Chrome上的 Tampermonkey或 Greasemonkey等用户脚本插件。这些插件允许用户编写 JavaScript脚本来自定义网页的行为和样式,以达到修改网页内容的目的。
4、以上是两种常见的修改网页内容的方法,还有其他方法,如使用在线编辑器或文本编辑器进行修改后保存再打开网页等。需要注意的是,这些修改只是暂时的,刷新页面或重新打开页面之后,网页内容会恢复原样。同时,对于一些需要登录或经过后端处理的网页内容,这些方法可能无法生效。
好了,文章到这里就结束啦,如果本次分享的谷歌浏览器 替换css样式和谷歌浏览器 替换css样式怎么设置问题对您有所帮助,还望关注下本站哦!
声明:信息资讯网所有作品(图文、音视频)均由用户自行上传分享,仅供网友学习交流,版权归原作者东方体育日报所有。若您的权利被侵害,请联系 删除。
本文链接:http://www.gdxhedu.com/news/186619.html