开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何在IE11中修复列表卡?图片很大(css Grid) Crhome，Safari运行良好

在IE11中修复列表卡的问题，可以尝试以下几个方法：

使用Polyfill库：在IE11中，一些新的Web技术可能不被完全支持，可以使用Polyfill库来填充这些缺失的功能。对于使用CSS Grid布局的问题，可以尝试使用像"autoprefixer"这样的Polyfill库，它可以自动为CSS属性添加浏览器前缀，以确保在不同浏览器中的兼容性。
使用Flexbox布局：如果使用CSS Grid布局在IE11中出现问题，可以考虑改用Flexbox布局。Flexbox布局在IE11中有更好的兼容性，并且可以实现类似的自适应布局效果。
使用传统的表格布局：如果以上方法都无法解决问题，可以考虑使用传统的表格布局来代替列表布局。表格布局在各种浏览器中都有很好的兼容性，并且可以实现类似的列表效果。
优化图片大小：如果图片过大导致页面卡顿，可以考虑对图片进行优化，减小图片的文件大小。可以使用图片压缩工具，如TinyPNG，来压缩图片，以提高页面加载速度。
检查代码错误：在修复列表卡的问题时，还需要检查代码中是否存在其他错误或冲突。可以使用开发者工具来检查并修复代码错误，确保代码的正确性。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云CDN（内容分发网络）：腾讯云CDN可以加速网站的访问速度，提高用户体验。详情请参考：https://cloud.tencent.com/product/cdn
腾讯云图片处理（Image Processing）：腾讯云图片处理可以对图片进行裁剪、缩放、水印等操作，提供高效的图片处理服务。详情请参考：https://cloud.tencent.com/product/img
腾讯云云服务器（CVM）：腾讯云云服务器提供稳定可靠的云计算资源，适用于各种应用场景。详情请参考：https://cloud.tencent.com/product/cvm
腾讯云数据库（TencentDB）：腾讯云数据库提供高性能、可扩展的数据库服务，支持多种数据库引擎。详情请参考：https://cloud.tencent.com/product/cdb
腾讯云人工智能（AI）：腾讯云人工智能提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。详情请参考：https://cloud.tencent.com/product/ai

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

WWDC 2022：哪些是前端开发者要关注的信息？

要了解构建 Safari Web 扩展的基础知识、如何将现有扩展转换为与 Safari 一起使用，以及如何在 App Store 打包发布，可以看看这个视频讲解 https://developer.apple.com...Safari 中的 Web Push 会使用和 Apple 推送相同的通知服务，该服务支持所有 Mac 和 iOS 设备上的本地推送。...子网格 CSS Grid 布局在 2017 年 3 月发布，它彻底改变了 Web 布局设计的可能性。...16，你现在可以为 CSS Grid 设置动画。...只要用户对你的域打开任何 tab，你的 Shared Worker 就会运行，并且对同一域打开的所有选项卡都可以共享同一个 Shared Worker。

1.8K1 0

「译」前端项目中常见的 CSS 问题

下面的例子分别展示了 Chrome 和 Safari 中的同一个按钮，后者默认会有一个灰色背景。...CSS 网格布局中关于 auto-fit 和 auto-fill 差异的误解在 CSS 网格布局中，repeat 函数可以在不使用媒体查询的情况下创建响应式列布局。...使用 CSS 网格定义 main 和 aside 元素 CSS 网格可用于定义布局中的 main 部分和 aside 部分，这是 CSS 网格的绝佳用途。...压缩或拉伸图片用 CSS 调整一张图片的大小时，如果纵横比与图片的宽高不一致，则图片会被压缩或拉伸。解决方法很简单：使用 CSS 的 object-fit。...RTL 布局中的手机号码在一个从右到左的布局中添加诸如 + 972-123555777 的手机号码时，加号将会位于号码末尾。要修复这个问题，可以重新指定手机号码的方向。

2.1K1 0

不敢相信，技术栈，居然被P站秒了

由于我们是国际性的大站，通过RUM监控，能够检测到哪些地域流畅，哪些地域卡顿，哪些地域流量高，哪些地域没有流量。...CSS层面，从最初的纯CSS，到LESS，再到现在的Grid，用户在观看视频的场景很多，我们必须适应不同的分辨率和屏幕尺寸。...Grid，是目前最强大的CSS网格布局方案，它将网页划分成一个个网格，可以任意组合不同的网格，做出不同的布局。对跨终端，多屏幕适配尤为有效。...提问：图片、音频、视频，页面上有多种多媒体内容，你们在PC端和移动端是怎么考虑的？答：主要受限于操作系统与浏览器。...答：我们一直支持IE，但最近我们决定放弃支持IE11之前的IE版本（兼容性太难搞了），言下之意，我们会放弃对Flash视频播放的支持。我们将专注于Chrome，Firefox和Safari的支持。

1.8K1 0

CSS Feature Query

等等，这种能力似乎CSS生来就有：为了保证新属性和新值将来可以添在现有的属性上，用户代理必须忽略一份非法样式表的某一部分，如含有未知属性的声明、含有非法值的声明、含有未知@关键字的@规则等等。...) P.S.仅支持属性名-值对儿形式的条件，不支持其它形式的，比如： @supports (@charset "utf-8") { /* 样式规则 */ } 三.用法实际场景中，一般模式（最佳实践）...是否支持某样式规则，最清楚这件事的当然是浏览器自己，只是这次通过feature query把这种内部状态暴露出来了而已对比Modernizer，有几个优势：性能更优：纯CSS方案，不需要JS参与扩展性良好...渐进使用grid特性 Is There A CSS Grid Polyfill?...变量，很容易把换肤功能作为一种增强效果来提供首字母下沉效果在支持initial-letter的环境（如Safari）很容易实现这种常见的排版效果（段落首字母下沉4行）： @supports (initial-letter

7933 0

一文带你看透 Chrome 浏览器架构

如图所示，主要可以分为：用户界面(地址栏、前进/后退按钮、书签菜单等) 浏览器引擎(在用户界面和渲染引擎之间传送指令) 渲染引擎(解析 HTML、CSS和JS并呈现页面) 后端服务层(网络、数据存储如...5）Trident 是 IE4+ 的内核，一直持续到 IE11，EdgeHTML 是微软抛弃 IE 后开发的全新内核渲染引擎工作流程渲染引擎的主要工作都是以HTML/JavaScript/CSS等文件作为输入...渲染进程：核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页，排版引擎 Blink 和 JavaScript 引擎 V8 都是运行在该进程中，默认情况下，Chrome...限制因设备的内存和CPU功率⽽异，但当Chrome达到限制时，它会在⼀个进程中开始从同⼀站点运⾏多个选项卡。有更高的资源占用。...因为每个进程都会包含公共基础结构的副本（如 JavaScript 运行环境），这就意味着浏览器会消耗更多的内存资源。

1.8K2 0

小智在这3年开发中遇到的 CSS 问题及解决方案，有大佬帮他总结好了！

在下面的例子中，同样的按钮在 Chrome 和 Safari 中，后者添加了默认的灰色背景。 ?...网格中auto-fit和auto-fill之间的差异的误解在CSS grid中，repeat函数可以创建响应列布局，而不需要使用媒体查询。...使用 CSS grid 定义 main 和 aside 元素 CSS grid 常规布局中 main 和 aside 部分，为了让布局更加的完美，我们应该让 aside 高度等于 main 高度，即使...有些图片需要在没有裁剪或调整大小的情况下显示，有些平台会强制用户上传或裁剪一个定义大小的图片。例如，Dribbble接受以800 * 600像素上传的缩略图。 18....RTL 布局的电话号在从右到左的布局中添加电话号码(如+ 972-123555777)时，加号将定位在电话号码的末尾。要解决这个问题，重新分配电话号码的方向即可。

3.7K1 0

记录一些小技巧-CSS篇

div{ filter: drop-shadow(0 0 6px #ddd); } ios移动端滚动卡顿在ios端中滚动容器不会有惯性滚动，用户在滑动时会出现明显的卡顿感，添加以下属性可解决问题...: flex) { /* css style */ } /* 其中一个属性支持即通过，类比 || */ @supports (display: grid) or (display: flex) {...比如，地址为 loacalhost:3000#red，则选择中ID属性值为red的元素，可以应用到网页换肤功能中。 ?...mask-image的图片一定要是png图片才看得出效果，两张图片结合会取相交的区域显示，如果用过ps的话，和蒙版是差不多的功能。...除了IE不支持外，谷歌、火狐、Edge、Safari、Opera等主流的浏览器都支持该属性。

8702 0

在P站做web前端，是种怎样的体验？

在开发的过程中，您是否使用了大量的图片和视频进行占位？所开发的内容和经验距离最终产品有多远？回答：实际上，我们在开发网站时不使用占位图片。...这部分开发是完全独立的，在净室中完成。为了在网站进行集成，我们希望在开发环境运行那些第三方脚本和广告，以便我们尽早的发现问题。...1、从纯 CSS 到使用 LESS 和 Mixins，再到使用自适应的 Grid 布局配合使用媒体查询和 picture 标签来适配不同的分辨率和屏幕尺寸。...HLS 中的自适应流媒体传输也是一个例子，当涉及到 HLS 流媒体传输质量问题时，IE 和 Edge 会很挑剔，因此我们需要防止一些高质量内容出现在低版本浏览器，否则视频将不断出现卡顿的现象。...回答：我们对 IE 的支持持续了很长一段时间，但是最近放弃了对 IE11 之前版本的支持。同时，我们也停止了在视频播放器中使用 Flash。

1.4K3 0

IE之页面加载慢.

这样图片越大, 后台转的byte[]数组越大也越卡, 那么改进思路自然是压缩, 以及去除ImageIO读取....然后把base64编码写在dom里的实现方式改成了css加载src. 改完之后, 后台已经完全不涉及到读写图片卡顿问题了....IE与Gzip 如果不是图片导致的加载慢, 为什么很多小伙伴反馈大屏慢呢? IE以及Edge似乎更卡一点. 我们用Chrome访问一张大屏模板, 对比下IE访问模板的响应时间....看下代码中Gzip的处理, 直接把 IE全家列到不支持Gzip的列表里了. 1 public boolean supportGzip() { 2 return !(isIE()) && !...修复验证因为是线上环境, 我们本地没还原客户那边的卡顿很久空白的情况, 猜测跟网速有关系. 需要用一个软件来模拟低速网络环境,. 首选自然是fiddler, 只需要一步设置即可.

2.4K7 0

干货：Web应用上线之前程序员应该了解的技术细节

（也可以看看这里这个问题）在登录页和任何涉及敏感数据的网页（如信用卡信息），使用 SSL / HTTPS。防止会话（session）劫持。避免跨站脚本攻击（XSS）。...为较小且有关联的图片使用 CSS 图片精灵技术，如工具栏（看“把 HTTP 请求减到最低”那点建议）繁忙 Web 站点应考虑将网页的内容分开存放在不同的域名下。...特别是… 静态内容（也就是图片、CSS、JavaScript 和无需通过 cookies 获取的一般内容）应放进独立且不使用 cookies 的域名上，因为所有域名和其子域名为客户端生成的 cookies...根据 W3C 文档编写你的 XHTML / HTML 和 CSS 代码，并确保它们有效。这里的目的是避免浏览器的怪异模式，并让它们更容易在非传统浏览器（如屏幕阅读器和移动设备）上运行。...BUG 修复要明白你将花费 20% 时间敲代码，而剩下 80% 的时间是在维护你的代码，所以代码质量很重要。建立一个良好的错误报告解决方案。为用户提供一个能向你提交建议与批评的系统。

1.2K5 0

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

5.删除CSS攻击和回退旧的代码库可能有一系列笨拙的IE黑客和后备，试图修复布局问题或启用现代CSS属性。该应用程序的最后一个版本是在十年前发布的，现在已不再受支持。是时候删除代码了。...适用于菜单、图片库、卡片等。 CSS网格:https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Grids。对于具有显式行和列的二维布局。...然而，如果你的代码库很大，或者移动的和桌面设计有很大的不同，你可以创建特定于设备的样式表，例如。，浏览器将不会重新计算该项目、列表中的其他项目或页面上的任何其他元素的大小或位置。渲染速度更快。 26.尝试渐进式渲染渐进式呈现是一种为每个页面和组件定义单独样式表的技术。...28.使用良好实践开发技术良好实践技术会不断发展、过期，并且因开发人员而异，但可靠的方法包括：将您的CSS组织成具有个人职责的较小文件，例如：页眉、页脚、表单元素、表格、菜单等。

3.4K2 0

聊一聊CSS的过去与未来，加深对CSS的理解

CSS3带来了伪类，如:nth-child、:nth-of-type、:checked，以及伪元素::before和::after。...这使得CSS在创建响应式设计中扮演着重要的角色。让我们回顾一下CSS中的媒体查询是如何保持新鲜的： 1994年：我们的主要人物Håkon Wium Lie提出了媒体查询的第一个想法。...到了2000年代末，开发人员已经创造了各种解决方案，如自定义PHP脚本和预处理器（如Less和Sass），以弥补这个缺陷。...最初作为围绕图片排列文本的简单方法（想象报纸的版面布局），浮动成为了创建整个网页布局的意外工具。...你可以在Chrome团队的最新文章《CSS和UI的新特性》中找到详细的列表。

2855 0

一款简单的WordPress主题June

主题介绍更新记录详细信息一款基于Bootstrap 5前端框架开发的WordPress主题，CSS3+HTML5和响应式设计，可自定义背景风格（颜色或图片），支持绝大数浏览器浏览...内置图片轮播组件，默认关闭主题配置内置强大的后台订制功能广告工具内置多种广告栏工具无需安装插件主题绝大部分功能不依靠任何插件即可完美运行数据库优化清理集成wp-clean-up...修复了几个已知错误。 1.252022-10-22 1. 修复当有置顶文章时，排序列表会多出置顶文章。 2. 修复其它已知问题。 1.242022-10-14 1....修复数字太大溢出，数字设置千、万和百万为单位（感谢 @XI） 2. 修复多个已知问题。 1.22022-10-11 1. 修复简言图片变形 (感谢 @XI） 2....把简言、书单和视频列表加入日志列表 2.

1K2 0

Day1:html和css

Day1:html和css 了解浏览器掌握WEB标准理解标签语义掌握常用标签掌握三种列表标签前端开发工具: 浏览器是网页显示、运行的平台，IE、火狐（Firefox）、谷歌（Chrome...）、Safari和Opera称为五大浏览器。...渲染引擎是负责网页的内容(如html, xml 图像等), 和 css, 还有计算网页的显示方式,, 进行显示, 浏览器的内核不同对网页语法的解释就会有所不同, 导致渲染的效果也不同. js引擎是用来解析...效果注释：` 相对路径,同一级的路径: xxx.html images/xxx.gif 图片放在上一级路径...90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通简书博客：达叔小生 https://www.jianshu.com/u/c785ece603d1 结语下面我将继续对其他知识

1.1K1 0

关于如何做一个“优秀网站”的清单——基础篇

1 基准版PWA的清单 LightHouse工具能够自动验证此列表中的许多项目，并有助于轻松测试指定站点。...改善方法： ■这里有很多种方式来提供性能，如优化内容效率、关键渲染路径等。...■还可以在服务器上查看使用PRPL模式和工具，如PageSpeed Module。...网站可以跨浏览器正常工作确认方法：分别在Chrome、Edge、Firefox和Safari浏览器上测试网站的表现。改善方法：修复所有跨浏览器运行时出现的问题。 ?...下面的例子中，页面在从列表页进入详情页时，先用列表中的图片进行粗略渲染，等详情页的数据返回后再将数据填充进去，使得页面切换体验非常顺滑，几乎感觉不到卡顿。 ?

9825 0

前端高级工程师（大前端）

后台管理系统项目：构建一个后台管理系统的前端界面，如企业内部使用的管理系统，包含数据表格展示、数据录入、数据筛选、权限管理等功能模块，提升学员对于数据展示和交互操作在管理系统中的实践能力。...了解 HTML5 新特性，如语义化标签、视频音频标签、Canvas 等，以实现更丰富的页面内容和交互效果。CSS：精通 CSS 布局，包括 Flexbox 和 Grid 布局，能够实现复杂的页面排版。...熟悉 CSS 预处理器（如 Sass、Less），提高开发效率和代码可维护性。掌握 CSS3 特效，如动画、过渡、阴影等，增强页面的视觉效果。...三、性能优化页面加载优化：减少 HTTP 请求：合并 CSS 和 JavaScript 文件，使用雪碧图（CSS Sprites）减少图片请求。...了解响应式图片和视频的处理方法，确保在不同屏幕尺寸下都能有良好的显示效果。移动端开发：掌握移动端开发的特点和技术，如移动端适配、触摸事件处理、移动端性能优化等。

1441 0

在网站或桌面应用使用Font Awesome图标库

如言语一般自由 Font Awesome完全免费，哪怕是商业用途。请查看许可。 CSS控制只要CSS支持，无论颜色、大小、阴影或者其它任何效果，都可以轻易展现。...查看字体对应字符，可以在字体列表中，在某个字体上右键查看属性(快捷键Alt+Enter)，查看该字体对应的字符：可以看到字体对应的字符是i，unicode编码是0069。...但是对于移动终端，特别是webapp中，这种方法还是有很大的用武之地的，可以很方便的兼容多分辨率，配合离线存储效果更佳。如果你有这方面更好的建议和意见，欢迎提出。...本文这里就以Font-Awesome为例，介绍一下如何在WPF中使用字体图标。..." VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="22"/> 运行后可以得到如下图标了：原理并不复杂

2.1K2 0

WEBAPP开发技巧总结

比如定义一块内容或文章区域可使用section标签，定义导航条或选项卡可以直接使用nav标签等等。...7、学会使用webkit-box 上一节，我们说过自适应布局模式，有些同学可能会问：如何在移动设备上做到完全自适应呢？...14、iOS中如何禁止用户保存图片＼复制图片我们在第13条技巧中提到元素的-webkit-touch-callout属性，同样为一个img标签指定-webkit-touch-callout为none...也会禁止设备弹出列表按钮，这样用户就无法保存＼复制你的图片了。...20、如何解决iOS 4.3版本中safari对页面中5位数字的自动识别和自动添加样式新的iOS系统也就是4.3版本，升级后对safari造成了一个bug：即使你添加了如下的meta标签，safari

1.9K2 0

CSS3与页面布局学习总结（四）——页面布局的多种方法

： 1.1.2、去除列表右边框开发中常需要在页面中展示一些列表，如商品展示列表等，如果我们要实现如下布局：实现代码 <!...： 1.3.2、多列布局栅格系统并没有真正实现分栏效果（如word中的分栏），CSS3为了满足这个要求增加了多列布局模块，如果需要实现多列布局模块先看看这几个CSS3属性： column-count...3.1、演示常见瀑布流布局网站：鼻祖：Pinterest 通用类：豆瓣市集，花瓣网，我喜欢，读图知天下美女图片：图丽网时尚资讯类：看潮网时尚购物类：蘑菇街，美丽说，人人逛街，卡当网品牌推广类...3.3.5、imagesLoaded imagesLoaded 是一个用于来检测网页中的图片是否载入完成的 JavaScript 工具库。支持回调的获取图片加载的进度，还可以绑定自定义事件。... 运行效果：但屏幕缩小时的运行效果： 4.4、媒介查询语法 @media queries是CSS3中引入的，不仅可以实现媒介类型的查询可以实现设备特性的查询

2.4K2 0

性能测试工具选择策略——仿真度对比测评分析报告

请求列表 9 6.2.2. IE11浏览器HTTP请求瀑布图 10 6.2.3. IE9浏览器HTTP请求瀑布图 11 6.2.4. Chrome浏览器HTTP瀑布图 12 6.3....页面中有很多的元素（如：文字链接、按钮、输入框、图片等），这些元素都是浏览器从服务端获取的数据。...性能测试工具的新建测试计划（场景）步骤可以选择的属性有：运行时间或迭代次数、并发用户数以及用户新增或下降方式等。其中“运行时间或迭代次数”和并发用户数是性能测试过程中的两个重要的属性特征。...3、与浏览器单独访问题的瀑布图相比，存在一定差异，如：catalogue.aspx和font-awesome.min.css这两个HTTP请求，LoadRunner是顺序执行，存在并行的时间窗口。...总结：LoadRunner12对录制的请脚本执行，可以仿真IE11浏览器的6个线程并发，但不能仿真器的HTTP请求之间的顺序，相比LoadRunner11已经有了很大的提升。

1.7K6 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭