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

Microsoft Edge不会在对gzipped文件的ajax调用中呈现SVG样式元素

Microsoft Edge是微软公司开发的一款网页浏览器。它支持各种前端开发技术,包括HTML、CSS和JavaScript,并且具有强大的性能和安全性。

在对gzipped文件的ajax调用中,Microsoft Edge可能无法正确呈现SVG样式元素。SVG(Scalable Vector Graphics)是一种基于XML的矢量图形格式,它可以用于创建高质量的图形和动画效果。

当使用Microsoft Edge进行ajax调用时,如果返回的文件是经过gzip压缩的SVG文件,可能会导致样式元素无法正确呈现。这可能是由于Microsoft Edge在处理gzip压缩的SVG文件时存在一些兼容性问题。

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

  1. 禁用gzip压缩:在服务器端配置中禁用对SVG文件的gzip压缩。这样可以确保返回的文件不会被压缩,从而避免Microsoft Edge无法正确呈现SVG样式元素的问题。
  2. 使用其他浏览器:如果对于特定的SVG文件,Microsoft Edge无法正确呈现样式元素,可以尝试在其他浏览器中进行测试,如Google Chrome、Mozilla Firefox等。
  3. 更新Microsoft Edge版本:检查是否有可用的Microsoft Edge更新版本,并进行更新。新版本可能修复了一些兼容性问题,从而解决了对gzipped文件的ajax调用中呈现SVG样式元素的问题。

总结起来,Microsoft Edge可能在对gzipped文件的ajax调用中无法正确呈现SVG样式元素。为了解决这个问题,可以禁用gzip压缩、尝试其他浏览器或更新Microsoft Edge版本。

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

相关·内容

移动端 Web 渲染解决方案

设计师通过 AE 导入 svg 实际上是“假svg 应为实际上是动画通过 svg 设置,所有的静态图像都是 img 文件 png 文件 Canvas (W3C) 同样,IE9之前浏览器都不支持...元素,canvas和SVG主要区别是:使用canvas绘制图形是通过调用其API,而SVG则是通过构建一棵XML元素树来实现。...与保留模式相反,不保存呈现图形;要在每次需要新框架时描述整个场景,开发人员需要重新调用所有必需绘图命令,而不考虑实际更改(SVG 已知拥有“场景图”)。...由于 SVG 要加载到 DOM ,或者创建图像前至少要进行解析,所以性能会稍微有所下降,但相比于呈现网页成本(大约几毫秒),这种下降是极其微小。...要保证在浏览器绘制 SVG 过程无时滞,一个页面静态 SVG 元素大约可以绘制一万个,动态 SVG 元素,就最好不要超过一千个。

3.5K40

使用CSS提高网站性能30种方法

开发人员采取简单方法,向不断增长样式表添加更多属性。文件越大,下载和处理时间就越长。 CSS影响渲染:浏览器分三个阶段呈现页面:布局(元素尺寸)、绘画(文本、颜色、边框、阴影等)、和复合(定位)。...您用户可能根本不会注意到。当然,你设计师会... 7.删除不必要字体 标准字体需要为每种粗细和样式创建单独文件。您可以删除那些不常用。 同样,您不太可能需要字体所有字符和字形。...更改任何子项内容时,浏览器将不会重新计算该项目、列表其他项目或页面上任何其他元素大小或位置。渲染速度更快。 26.尝试渐进式渲染 渐进式呈现是一种为每个页面和组件定义单独样式技术。...对一个组件样式所做更改不会影响其他缓存文件。 你可以领养原生Web组件或在组件出现在HTML之前立即引用较小CSS文件: 都是呈现阻止,但每个文件不应超过几千字节。 较旧浏览器可能会显示一个空白页面,直到所有CSS都加载完毕,但总体影响应该不会比一个大呈现阻塞样式表更糟。

3.4K20
  • 2种方式!带你快速实现前端截图

    来说要复杂一些, 基本原理是读取DOM元素信息,基于这些信息去构建截图,并呈现在canvas画布。...:入口文件,将dom节点渲染到一个canvas,并返回。...获取到目标节点后,需要把克隆出来目标节点dom装载到一个iframe里,进行一次渲染,然后就可以获取到经过浏览器视图真实呈现节点样式。...在对目标节点解析方法,递归整个DOM树,并取得每一层节点数据,对于每一个节点而言需要绘制部分包括边框、背景、阴影、内容,而对于内容就包含图片、文字、视频等。...构建内部渲染器 把目标节点处理成特定数据结构之后,就需要结合Canvas调用渲染方法了,Canvas绘图需要根据样式计算哪些元素应该绘制在上层,哪些在下层,那么这个规则是什么样呢?

    4K21

    WEB动画几种实现方式

    GIF 格式可以存多幅彩色图像,如果把存于一个文件多幅图像数据逐幅读出并显示到屏幕上,就可构成一种最简单动画。...了解下有这个东东就够了哈 三、Javascript + HTML 原理: 其主要思想是通过 setInterval 或 setTimeout 方法回调函数来持续调用改变某个元素 CSS 样式以达到元素样式变化效果...特性 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络基于矢量图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸情况下其图形质量不会有所损失...之后再写详细文章研究。Canvas 主要优势是可以应对页面多个动画元素渲染较慢情况,完全通过 javascript 来渲染控制动画执行。...但是 transition 并不能实现独立动画,只能在某个标签元素样式或状态改变时进行平滑动画效果过渡,而不是马上改变。

    2.3K20

    微信小程序开发:前端隐藏按纽样式,嵌套按钮不影响其它元素样式

    微信小程序有些限制,比如获取头像信息,手机号信息时必须使用 button 元素并且包含 open-type 属性,不然调用直接会失效,那么问题来了,我就想用一个图片来触发怎么解决。...我思路是直接在图片元素外嵌套一层不可见按钮就能解决了,通过设置还能忽略对原本样式影响,就像什么都没有一样,点击图片照样触发按钮绑定事件。...微信小程序前端开发: 样式使用 WXSS 文件进行定义,也类似于 CSS ,但是只支持微信小程序特定样式属性。 4....微信小程序前端开发: 页面的生命周期由微信小程序框架控制,可以在对生命周期函数编写相应逻辑。 6....API 调用 Web 前端开发: 调用浏览器提供 API 来实现与系统交互,如 DOM 操作、 AJAX 请求等。

    14100

    前端面试实录CSS篇(最近一周)

    比如: hover,active, visited • 伪元素:用于创建一些原本不在文档树元素样式, 比如:::after,::before。...解决高度塌陷问题:在对元素设置浮动后,父元素会发生高度塌陷,也就是父元素高度变为 0。解决这个问题,只需要把父元素变成一个 BFC。常用办法是给父元素设置overflow:hidden。 3....1. bmp: 无损,此图片格式不会对数据进行压缩,所以 bmp 格式图片通常都是较大文件 2. git: 无损,特点是文件小,适用场景:对色彩要求不高且文件体积较小 3. jpeg,jpg: 有损...,有损压缩会导致图片模糊,文件类型比 gif 较大 4. png-8:无损,png-8 比 gif 文件还小 5. png-24: 无损,优点在于压缩了图片数据 6. svg: 无损矢量图,放大不会失真...• 1px 问题本质:在一些 Retina 屏幕上,移动端页面的 1px 会变得很粗,所呈现出来不止是 1px 效果,原因就是 CSS 1px 不能和移动端 1px 划等号,他们之间是有一个比例关系

    11110

    前端快速入门之概述

    前言:从百度说起 案例 点击百度搜索框显示出搜索结果 涉及前端三大要素,从初级到高级应用都可以由其完成,三者即: HTML(5) // 页面所有呈现元素(按钮、输入框、图片…)“附着点”,所有页面可见元素都有对应...CSS // 页面呈现元素所有样式均可以由CSS进行控制,即文字颜色、字号、间距,区块排列等均由CSS指定,本质上仍然是对html标签控制,只有该html标签具有某一属性,这时才能通过CSS对其进行控制...分析上述例子词语: 点击:由JavaScript完成,会触发一个request请求 百度搜索框:本质是input标签,通过CSS样式修饰为用户所见样子 显示搜索结果:先前请求到达后台后,经过处理返回查询结果...(如$.ajax())和同级代码之间执行先后顺序,一般可将ajax请求方式设为同步执行即可解决,在包含复杂数据请求时尤其要注意这一隐含问题。...//前端为固定调用方式,后端有多种实现形式(Java、Node),例如Nodewebsocket 意义 //真正意义上长连接,在此之前一般只能通过ajax轮询来实现;多次轮询只是多个请求返回各时间点结果

    1.5K20

    5个你可能不知道CSS属性

    :该值开启元素大小限制。这意味着修改元素大小可以不需要检查其后代。 :该值开启元素布局限制。这规定外面任何东西都不会影响其内部布局,反之亦然。 :该值打开元素样式限制。...因此,对元素及其后代可能产生影响属性不会影响这个元素之外任何内容。 :该值打开元素绘制限制。这意味着元素后代不会显示在其边界之外。...所有主流浏览器(包括Microsoft Edge)目前都支持它,尽管Internet Explorer支持早期版本规范不同值。 此外,Safari还支持此CSS属性供应商前缀版本 。...: 没有剪贴 每个基本形状都有不同参数。列出全部参数很无聊。下面是两个应用了这个属性两个示例图片: 除了Microsoft浏览器(Edge和IE)之外,所有主流浏览器都支持。...(IE和Microsoft Edge不支持)。慢着,在继续之前,您应该注意一些事情: 您不应该将此属性应用于太多元素即使您页面运行良好。它会减慢运行速度并消耗大量资源和内存,这很不友好。

    1.2K80

    HTML 面试知识点总结

    (浏览器渲染过程) FOUC:主要指的是样式闪烁问题,由于浏览器渲染机制(比如firefox),在 CSS 加载之前,先呈现了 HTML,就会导致展示 出无样式内容,然后样式突然呈现现象。...SVG 是一种使用 XML 描述 2D 图形语言。SVG 基于 XML,这意味着 SVG DOM 每个元素都是可用。我们可以为某个元素 附加 JavaScript 事件监听函数。...并且 SVG 保存是图形绘制方法,因此当 SVG 图形缩放时并不会失真。 详细资料可以参考: 《SVG 与 HTML5 canvas 各有什么优点,哪个更有前途?》 48....Flash、Ajax 各自优缺点,在使用如何取舍?...在 Normalize.css 中就不会有这样问题,因为在 我们准则对多选择器使用时非常谨慎,我们仅会有目的地对目标元素设置样式

    1.9K20

    5个你可能不知道CSS属性

    fallback: 使用自定义字体渲染文本在短时间内 (大约 100ms) 不可见,之后浏览器将持续加载自定义字体,这个期间,文本将以无样式状态呈现,当自定义字体加载好了之后,文本将会被赋予自定义字体...style:该值打开元素样式限制。因此,对元素及其后代可能产生影响属性不会影响这个元素之外任何内容。 paint:该值打开元素绘制限制。这意味着元素后代不会显示在其边界之外。...所有主流浏览器(包括Microsoft Edge)目前都支持它,尽管Internet Explorer支持早期版本规范不同值。 此外,Safari还支持此CSS属性供应商前缀版本 。...下面是两个应用了这个属性两个示例图片: 除了Microsoft浏览器(Edge和IE)之外,所有主流浏览器都支持clip-path。此外,您应该记住支持此属性浏览器一些注意事项。...(IE和Microsoft Edge不支持)。慢着,在继续之前,您应该注意一些事情: 您不应该将此属性应用于太多元素即使您页面运行良好。它会减慢运行速度并消耗大量资源和内存,这很不友好。

    92620

    《最新出炉》系列初窥篇-Python+Playwright自动化测试-63 - Canvas和SVG元素定位

    1.简介今天宏哥分享在实际测试工作很少遇到,比较生僻,如果突然遇到我们可能会脑大、懵逼,一时之间不知道怎么办?所以宏哥这里提供一种思路供大家学习和参考。...svg绘制出来图是不会SVG英文全称为Scalable vector Graphics,意思为可缩放矢量图,这种元素比较特殊,需要通过 name() 函数来进行定位。...6.页面上用多个svg元素1.如果页面上用多个svg元素,通过//*[name()="svg"] 会定位全部svg元素,为了区分定位具体哪个,可以通过父元素区分。...//*[name()="svg" and @width="500"]7.定位svg元素1.如果需要定位svg元素,如下图text属性。...9.小结 今天主要讲解和分享了一些Canvas和SVG基础知识和应用,然后进入主题SVG定位相关知识讲解。有一种会者不难,难者不会感觉。

    32730

    mxgraph教程_graph绘图

    mxGraph其他很多概念都是以cell作为基础样式、布局、内容文本、事件、位置… 误区 前面提到mxGraph图形分为两类:vertex(点)和edge(边),但实际上它们都属于mxCell类实例...官方文档提供beginUpdate和endUpdate函数,写法上和数据库事务提交很像,也有文章说是进行批量处理,实际上只是为了避免多次触发而合并了change事件而已,如果不使用这两个函数不会对绘图结果产生什么影响...所有的布局算法类都是“继承”自基类mxGraphLayout,自定义了一些属性,同时实现API函数execute,mxGraph在绘制图形时候会调用这个函数。...一个强大之处是支持在svg插入HTML元素,官方给出examples中有个htmllabel.html实现了类似功能。...概括地说两步实现: 在创建点时候插入一个 UserObject 对象声明,表明此处可以插入DOM元素。 重载 convertValueToString 函数,返回DOM元素

    2.2K10

    年薪30万前端面试题,你能答对几道?|附答案

    DOCTYPE声明位于位于HTML文档第一行,处于html 标签之前。告知浏览器解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。...此外,元素在读屏软件也会被隐藏; Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外,读屏软件也不会读到元素内容。...这种方式产生效果就像元素完全不存在; Position:不会影响布局,能让元素保持可以操作; Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。...如果要在你 clip-path 中使用外部 SVG 文件,浏览器支持度还要低; 3.CSS清除浮动几种方法(至少两种) 使用带clear属性元素 使用CSSoverflow属性; 使用CSS...MIME类型文件 文件显示 浏览器这边做工作大致分为以下几步: 加载:根据请求URL进行域名解析,向服务器发起请求,接收文件(HTML、JS、CSS、图象等)。

    5.6K60

    前端经典面试题(有答案)_2023-03-01

    (6)SVG是无损矢量图。SVG是矢量图意味着SVG图片由直线和曲线以及绘制它们方法组成。当放大SVG图片时,看到还是线和曲线,而不会出现像素点。...通俗来讲:BFC是一个独立布局环境,可以理解为一个容器,在这个容器按照一定规则进行物品摆放,并且不会影响其它环境物品。如果一个元素符合触发BFC条件,则BFC元素布局不受外部影响。...在BFC中上下相邻两个容器margin会重叠 计算BFC高度时,需要计算浮动元素高度 BFC区域不会与浮动容器发生重叠 BFC是独立容器,容器内部元素不会影响外部元素 每个元素左margin...解决高度塌陷问题:在对元素设置浮动后,父元素会发生高度塌陷,也就是父元素高度变为0。解决这个问题,只需要把父元素变成一个BFC。常用办法是给父元素设置overflow:hidden。...两者区别如下: (1)在渲染树 display:none会让元素完全从渲染树消失,渲染时不会占据任何空间; visibility:hidden不会元素从渲染树消失,渲染元素还会占据相应空间,

    1.3K20

    一篇文章带你了解网页框架——Vue简单入门

    --我们采用{{}}来调用相关Vuedata存放数据--> {{ message }} <!...Vue属性连接 EL挂载点设置后,页面属性可以调用Vue数据(data)和方法(method) EL挂载点注意点: Vue作用范围在EL挂载点本体元素以及后代元素 VueEL挂载点可以依赖于各种选择器...--当我们修改文本值时,VsCode代码不会发生变化,但实际上message已经发生变化,我们将message值单独列出来--> <input type="text" v-model...the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/ */ background-image...所以如果想要完成项目开发功能,还需要与后台交互技术Ajax(主要采用Axios技术) Axios技术 Axios技术是原生Ajax进行封装,简化书写 我们在之前Ajax专题中有完整介绍过Ajax

    95820

    【CSS3】css开篇基础(5)

    3.2字体图标的引入 生成之后点击download 1.把下载包里面的 fonts 文件夹放入页面根目录下 2.在CSS样式全局声明字体:简单理解把这些字体通过css引入到我们页面 右键打开...style.css,复制如图代码引入我们自己CSS文件 3.html标签内添加小图标 我们打开解压文件 demo.html ,复制想要图标,粘贴进 标签 mac...原来字体图标不够用了,我们需要添加新字体图标到原来字体文件。...更改用户鼠标样式 表单轮廓 防止表单域拖拽 1.鼠标样式 设置或检索在对象上移动鼠标指针采用何种系统预定义光标形状,以下是pointer可以所属很多值: li { cursor: pointer...巧妙运用浮动元素不会压住文字特性 先准备大盒子,左边盒子浮动,右边不需要盒子,文字会自动环绕 <!

    8210
    领券