首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

IE中相对关键帧(vw)字体大小的奇怪行为

IE中相对关键帧(vw)字体大小的奇怪行为是指在IE浏览器中使用相对关键帧单位vw(视口宽度的百分比)设置字体大小时,可能会出现不一致或奇怪的表现。

这种行为可能是由于IE浏览器对vw单位的解析机制不完善或存在bug所致。相对关键帧单位vw是相对于视口宽度的百分比,它可以用于设置元素的尺寸、字体大小等属性。在其他现代浏览器中,vw单位通常能够正常工作,但在IE浏览器中可能会出现问题。

为了解决这个问题,可以考虑以下几种方法:

  1. 使用媒体查询:通过媒体查询来针对IE浏览器单独设置字体大小。例如,可以在CSS中使用@media规则,检测是否是IE浏览器,并设置相应的字体大小。
  2. 使用JavaScript:通过JavaScript检测浏览器类型,并根据IE浏览器版本设置字体大小。可以使用浏览器的userAgent属性来检测浏览器信息,然后针对IE浏览器设置字体大小。
  3. 使用Polyfill:使用一些针对性的插件或Polyfill库来修复IE浏览器中vw单位的问题。这些工具可以模拟vw单位的行为,使其在IE浏览器中正常工作。

总之,由于IE浏览器对vw单位的解析存在问题,开发者在设计和开发时需要注意这一点,并采取相应的解决方案来确保页面在IE浏览器中正常显示。腾讯云并没有专门提供与此问题相关的产品或解决方案,但以上方法可以用于解决这个问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

前端:CSS字体大小 px、em、rem区别

px特点 IE无法调整那些使用px作为单位字体大小; 国外大部分网站能够调整原因在于其使用了em或rem作为字体单位; Firefox能够调整px和em,rem,但是96%以上中国网民使用IE...2、em em(font size of the element)是指相对于父元素字体大小单位。...所以默认情况下 1em=16px EM特点 em值并不是固定; em会继承父级元素字体大小。 3、rem rem和 em相似,但是 rem是相对于根元素字体大小单位。...但是 rem在 IE8及其以下都不兼容。...其长度单位: vw : 1vw 等于视口宽度1% vh : 1vh 等于视口高度1% vmin : 选取 vw 和 vh 中最小那个 vmax : 选取 vw 和 vh 中最大那个 参考

2.1K10
  • css新单位vw,vh在响应式设计应用

    但使用基于百分比值并不总是相对于浏览器窗口大小定义最佳方式,比如字体大小不会随着你窗口改变而改变,如今css3引入新单位明确解决这一问题。...View Demo css3引入vw”和”vh”基于宽度/高度相对于窗口大小,”vw”=”view width”, “vh”=”view height”; 以上我们称为视窗单位允许我们更接近浏览器窗口来定义大小...参照demo案例对照下面四个容器css样式: .demo { width: 100vw; font-size: 10vw; /* 宽度为窗口100%, 字体大小为窗口10% */ } ....: 5vw; /* 宽度为窗口50%, 字体大小为窗口5% */ } .demo4 { width: 10vw; height: 50vh; /* 宽度为窗口10%, 容器高度为窗口50%...目前这款css3应用支持所有主流浏览器,IE必须10以上。

    1K10

    CSS中常见长度单位

    1.CSS中常见长度单位 名称 英文全称 中文名 相对/绝对长度 换算 描述 % percentage 百分比 相对 原长度*百分数 px pixel 像素...(2)CSS设置字体大小(font-size)请尽量使用em或者ex代替px,原因是用px做描述字体大小唯一致命缺点就是在IE下无法用浏览器字体缩放功能。 2....CSS3新增度量单位 (1)ch——字符0(零)宽度; (2)rem——根元素(html元素)em; (3)vw——viewpoint width,视窗宽度,1vw等于视窗宽度1%;...(4)vh——viewpoint height,视窗高度,1vh等于视窗高度1%; (5)vmin——vw和vh较小那个。...vw、vh、vmin,浏览器支持并不乐观,IE9支持了,Chrome、Safari、Opera和Firefox还都不支持。

    1.2K20

    2022高频前端面试题——CSS篇

    但是在不同设备之间每个设备像素所代表物理长度是可以变化,这点表现相对性 em是一个相对长度单位,具体大小需要相对于父元素计算,比如父元素字体大小为80px,那么子元素1em就表示大小和父元素一样为...80px,0.5em就表示字体大小是父元素一半为40px 2. vw、vh 是什么?...它有两种盒模型,W3C盒模型和IE盒模型(IE6以下,不包括IE6以及怪异模式下IE5.5+) 理论上两者主要区别是二者盒子宽高是否包括元素边框和内边距。...当用CSS给给某个元素定义高或宽时,IE盒模型内容宽或高将会包含内边距和边框,而W3C盒模型并不会。 18. 如何触发重排和重绘?...DOM节点-只触发重绘,因为没有几何变化 移动或者给页面DOM节点添加动画 添加一个样式表,调整样式属性 用户行为,例如调整窗口大小,改变字号,或者滚动。

    1.4K30

    论CSS可使用font-size长度单位

    它们常用在自适应网站设计与根据不同页面宽度断点设置不同字体大小。...参加CodePen上使用百分比设置字体大小例子,(by @SitePoint)。 视窗单位(vw,vh,vmin,vmax) 视窗单位非常有趣。...使用关键字来设置字体大小 另一个选择是使用关键字设置 font-size。有两种类型关键字:绝对和相对。绝对值关键字常用在指定字体大小,其值是根据不同用户浏览器计算出一个数据表里某项。...即便在IE9或者IE10版本里,使用rem给缩写 font属性设置字体大小时,都可能使赋值失败。这两个浏览器也不支持给伪元素使用rem单位。 本文讨论所有单位,视窗单位浏览器支持是最少。...记住IE11和Edge都不支持vmax单位。 结论 本文里,我们讨论了在CSS中使用不同单位长度以及它们各自不同之处。总的来说,你可以尽量避免使用绝对单位,应该多尝试使用相对单位。

    2.4K20

    【说站】css样式单位px,em,pt,ex,pc,in,mm,cm详解

    其实css长度单位有px、em、pt、in、ex、pc、mm、cm、ch、rem、vw、vh、vmin、vmax。下面品自行将对这些css样式长度单位做详细说明。...css容器大小我们经常用px做单位;字体大小(font-size)很多人用px做单位,其实用px做字体单位唯一致命缺点就是在IE下无法用浏览器字体缩放功能。 2、em:相对长度单位。...相对于元素字体大小(font-size),如果当前行内文本字体尺寸未被人为设置,则相对于浏览器默认字体尺寸。3em 表示当前字体大小 3 倍 3、pt:点(Point),绝对长度单位。...相对于根元素字体大小(font-size); 11、vw相对长度单位。相对于视口*宽度 1%; 12、vh:相对长度单位。相对于视口*高度 1%; 13、vmin:相对长度单位。...相对于视口*较小尺寸 1% ,vw和vh较小那个; 14、vmax:相对长度单位。相对于视口*较大尺寸 1%,vw和vh较大那个;  视口(Viewport)= 浏览器窗口尺寸。

    2.4K21

    CSS:绝对单位、相对单位

    作者:Abudula__ 我们对单位很熟悉,比如说,千克,千米,米等,这些就是绝对单位,我们又有听到太阳质量等于33个地球,这个就是相对单位。在CSS,单位也可以分为这两类。...font-size 对于字体大小属性(font-size)来说,em 计算方式是相对于父元素字体大小,1em 等于父元素设置字体大小。...(remr就是表示root,虽然rem相对em进步了很多,但是由于是新技术,不支持IE8以下(包括IE8),不过幸喜是移动端可以放心使用) 由于 rem 是基于跟元素 html font-size...vw:基于视窗宽度计算,1vw 等于视窗宽度百分之一 vh:基于视窗高度计算,1vh 等于视窗高度百分之一 vmin:基于vw和vh最小值来计算,1vmin 等于最小值百分之一 vmax:...基于vw和vh最大值来计算,1vmax 等于最大值百分之一 下面我们实例说明实现一个宽度为视窗宽度 25%,高度为视窗高度 50% 一个盒子: .box { height: 50vh; /

    2.1K20

    web移动端适配方案实践

    常见单位有:px、em、rem、vw,这四种单位介绍已经是老生常谈,本方案最后选择是使用 rem,相比px和em,优势是毋庸置疑,开发者不必再考虑设备分辨率改变导致元素布局问题,只需要改变根元素...并且相对vw,可以直接将移动端页面元素在屏幕居中,再加上良好兼容性:IE8以上版本和其他浏览器都已经支持,是做响应式页面的不二之选。 2....step1已经选择了rem作为单位,在此处只需要固定设置设计稿 html 标签字体大小,根据计算公式: html字体大小 = 基准n * (clientWidth / 设计稿宽度) 为了方便计算,基准...,是相对于html标签字体大小单位 早先给html标签设置 font-size: 62.5%; 只是为了实现 1rem = 10px 从而使计算方便,不能满足此处页面元素跟随设备尺寸等比缩放需求 文字字体大小建议不要用...6.2 IE默认使用最高版本 ie浏览器是web前端一大毒瘤,在开发过程中发现,如果不设置指定meta标签,ie会直接使用ie7内核渲染,这显然不是开发者所希望,添加下面的meta标签即可: <meta

    3K194

    CSS3 视口单位vw、vh实现自适应(带有px,em,rem简单介绍)

    3、rem rem和em一样也是相对长度单位,但是不一样是rem始终都是相对html根元素。...这样有个很大有点就是使用rem后不会受到对象内文本字体尺寸影响,而且只需要改变根元素就能改变所有的字体大小。...兼容性也是不错IE8以上版本和其他浏览器都已经支持,是个做响应式页面的好选择 4、重点:vw和vh vw和vh是视口(viewport units)单位,何谓视口,就是根据你浏览器窗口大小单位...和百分比不一样是,vw始终相对于可视窗口宽度,而百分比和其父元素宽度有关。 vh就是可视窗口高度了。...二、使用vw,vh能做什么 1、响应式页面轻松搞定 由于vw,vh特性,他们能够根据窗口大小来自动调节字体大小,这就能很轻松地完成响应式页面的布局 2、小技巧之响应垂直居中 可以使用vw,vh来实现在页面响应垂直居中

    1.9K10

    css 文字自适应大小_div自适应窗口大小

    还有一种是用户操作,比如改变浏览器大小,改变浏览器字体大小等(回流+重绘) 让我们看看下面的代码是如何影响回流和重绘: var s = document.body.style; s.padding...,可以提出来交流下~ —————————————————————– 4. rem + js css3单位px,em,rem,vh,vw,vmin,vmax区别及浏览器支持情况 px:绝对单位,页面按精确像素展示...rem:相对单位,可理解为”root em”, 相对根节点html字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持。...vh:viewpoint height,视窗高度,1vh等于视窗高度1%。 vmin:vw和vh较小那个。 vmax:vw和vh较大那个。...) ch:以节点所使用字体“0”字符为基准,找不到时为0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4

    3.3K20

    web移动端适配方案实践

    常见单位有:px、em、rem、vw,这四种单位介绍已经是老生常谈,本方案最后选择是使用 rem,相比px和em,优势是毋庸置疑,开发者不必再考虑设备分辨率改变导致元素布局问题,只需要改变根元素...并且相对vw,可以直接将移动端页面元素在屏幕居中,再加上良好兼容性:IE8以上版本和其他浏览器都已经支持,是做响应式页面的不二之选。 2....step1已经选择了rem作为单位,在此处只需要固定设置设计稿 html 标签字体大小,根据计算公式: html字体大小 = 基准n * (clientWidth / 设计稿宽度) 为了方便计算,基准...,是相对于html标签字体大小单位 早先给html标签设置 font-size: 62.5%; 只是为了实现 1rem = 10px 从而使计算方便,不能满足此处页面元素跟随设备尺寸等比缩放需求 文字字体大小建议不要用...6.2 IE默认使用最高版本 ie浏览器是web前端一大毒瘤,在开发过程中发现,如果不设置指定meta标签,ie会直接使用ie7内核渲染,这显然不是开发者所希望,添加下面的meta标签即可: <meta

    1.6K30

    我碰到那些面试题html+css

    情况下,在IE6显示margin比设置大 问题症状:常见症状是IE6后面的一块被顶到下一行 碰到频率:90%(稍微复杂点页面都会碰到,float布局最常见浏览器兼容问题) 解决方案:在float...,比如,ie 浏览器显示“ie盒子模型”,在 ff 浏览器显示“标准 w3c 盒子模型”。....% %百分比,相对长度单位,相对于父元素百分比值 元素款到与字体大小使用区别: (1)尽量使用相对尺寸单位 使用相对尺寸单位计量,则在调整页面的布局时候,不需要遍历所有的内部 DOM结构,重新设置内部子元素尺寸大小...如果是随着父容器或者是整体页 面布局而改变尺寸,则使用%更好,如元素高度和宽度设置; (2)字体尺寸尽量使用em,rem 为了字体大小可维护性和伸缩性,推荐使用em,如果存在3层以及3层 以上字体相对尺寸设置...,可以考虑使用em; 5.vh和vw vh和vw 相对于视口高度和宽度,1vh等于1/100视口高度,1vw等于1/100 视口宽度,比如:浏览器高度900px,宽度为750px, 1vh=900px

    1.2K20

    面试官:你了解过移动端适配吗?

    知道什么叫做分辨率后,有人就会奇怪,我记得苹果苹果官网上苹果6分辨率为750x1334啊,但是设计稿上苹果6分辨率为375x667啊,而且各个设备分辨率都比实际分辨率小很多,这就牵扯到一些历史原因了...在Web浏览器术语,通常与浏览器窗口相同,但不包括浏览器UI, 菜单栏等——即指你正在浏览文档那一部分。 那么在移动端如何配置视口呢? 简单一个meta标签即可!...区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对只是HTML根元素。...这个单位可谓集相对大小和绝对大小优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。...vh和vw方案和rem类似也是相当麻烦需要做单位转化,而且px转换成vw不一定能完全整除,因此有一定像素差。

    1.3K10

    CSS&HTML面经专题——(四)移动端响应式布局

    视觉视口不会影响布局视口宽度和高度。 固定大小——跟屏幕大小相同,在上面。 layout viewport(布局视口):布局视口定义了pc网页在移动端默认布局行为。...3、rem/ vh和vw / 流式布局 (2)rem布局——等比缩放布局(网易新闻) ​em : 是一个相对单位,1em等于当前元素或父元素font-size值。 ​...rem : 是一个相对单位,1rem等于根元素font-size值。...px to rem 快捷键:ALT+Z (3)vh/vw vw相对于视窗宽度,视窗宽度是100vw vh:相对于视窗高度,视窗高度是100vh 如果在iphone 6 下想 =100px ,...rem 相对单位,可理解为”root em”, 相对根节点html字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持。

    2.3K20

    HTML CSS

    (因为 IE 不标准)在 IE 浏览器 alt 起到了 title 作用,变成文字提示。 在定义 img 对象时,将 alt 和 title 属性写全,可以保证在各种浏览器中都能正常使用。...relative:相对定位,相对于自己本身在正常文档流位置进行定位。 absolute:生成绝对定位,相对于最近一级定位不为static父元素进行定位。...fixed: (老版本IE不支持)生成绝对定位,相对于浏览器窗口或者frame进行定位。 static:默认值,没有定位,元素出现在正常文档流。...rem rem是全部长度都相对于根元素元素。通常做法是给html元素设置一个字体大小,然后其他元素长度单位就为rem。...em 子元素字体大小em是相对于父元素字体大小 元素width/height/padding/margin用em的话是相对于该元素font-size vw/vh 全称是 Viewport Width

    1.3K30

    如何决定响应式网站 CSS 单位?

    ⚓ em 单位 em 单位总是相对于它直接父级字体大小。1em == 一个父字体大小。...如果未覆盖,默认字体大小为 16px,假设在父元素字体大小为 48px,那么在子元素为 1em == 48px。...vw 代表 viewprot width(视口宽度),这意味着 vw 总是相对于根宽度 1%,与父元素宽度无关。...所以,如果 1vw == 1% 那么 100vw == 100% 视口宽度。 让我们考虑以下示例,其中一个子项宽度相对于父项大小,而另一个子项宽度相对于根。...% 单位相对相对父级宽度。 em 单位相对于元素字体大小边距和填充 。 rem 单位相对于根字体大小vw 和 vh 表示相对于根宽度和高度。

    97210

    CSS面试题

    important声明样式优先级最高 内联样式:1000 id 选择器 100 如果优先级相同,则最后出现样式生效; 继承出来样式优先级最低; em\px\rem\vw区别 px:绝对单位 em...:相对单位,相对父节点字体大小 rem:相对单位,相对于根节点html字体大小 vw:天生就是随着屏幕宽度变化而变化 css几种定位方式?...必须指定 top, right, bottom 或 left 四个属性其中一个,粘性定位才会生效。否则其行为相对定位相同。且元素不会脱离文档流。...、 flex-shrink 、flex-basic简写 默认是0 1 auto,后面两个值可选 该属性有两个快捷值auto(1 1 auto)和none(0 0 auto) 标准盒子模型和IE...回流是影响浏览器性能关键因素,因为其变化涉及到部分页面(或是整个页面)布局更新。一个元素回流可能会导致了其所有子元素以及DOM紧随其后节点、祖先节点元素随后回流。

    41740
    领券