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

为什么Safari不显示某些元素,即使web检查器显示它们在那里

Safari不显示某些元素,即使web检查器显示它们在那里的原因可能有以下几个方面:

  1. 兼容性问题:Safari可能对某些CSS属性或JavaScript代码的解析和渲染存在兼容性问题,导致某些元素无法正确显示。这可能是由于Safari对Web标准的实现方式与其他浏览器不同所致。
  2. 浏览器缓存:Safari可能会缓存网页的某些资源,如CSS文件、JavaScript文件等。如果某些元素的样式或行为在最新的资源文件中已经更改,但Safari仍然使用缓存的旧版本,就会导致元素显示异常。解决方法可以尝试清除浏览器缓存或使用强制刷新(Ctrl + F5)。
  3. JavaScript错误:如果网页中存在JavaScript错误,Safari可能会停止执行JavaScript代码,导致某些元素的交互或显示效果受到影响。可以通过检查网页中的JavaScript错误日志来排查和修复问题。
  4. CSS样式问题:某些CSS样式属性在Safari中可能有不同的默认值或解析方式,导致元素的布局或外观与其他浏览器不一致。可以通过使用浏览器前缀、添加兼容性样式或使用CSS Hack来解决这些问题。
  5. 图片加载问题:如果某些元素使用的图片链接无效或加载失败,Safari可能会导致这些元素无法显示。可以检查图片链接是否正确,并确保图片资源可访问。

总结起来,Safari不显示某些元素的原因可能是兼容性问题、浏览器缓存、JavaScript错误、CSS样式问题或图片加载问题。解决方法包括清除缓存、修复JavaScript错误、调整CSS样式、检查图片链接等。请注意,以上答案仅供参考,具体情况需要根据实际网页代码和环境进行分析和解决。

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

相关·内容

Github 移除 JQuery 的过程

我们鼓励在任何新代码中导入jQuery。为了方便使用自动化,我们创建了eslint插件jquery,如果有人试图使用jquery特性(例如$.ajax),它将使CI检查失败。...因此,即使那些使用JS增强的web表单和其他UI元素通常也会在浏览中禁用JavaScript。在某些情况下,我们能够完全删除某些遗留行为,而不必在vanilla JS中重写它们。...直到2017年Chrome和Safari都发布并实现了Web组件v1规范,我们才开始更广泛地采用定制元素。 在jQuery迁移期间,我们寻找适合作为自定义元素提取的模式。...例如,我们将显示模式对话框的facebox用法转换为 元素。 我们追求进步的总体理念也延伸到了定制元素。这意味着我们将尽可能多的内容保存在标记中,并且只在标记上添加行为。...例如,默认显示原始时间戳,并升级以将时间转换为本地时区,而 嵌套在元素中时,即使没有JavaScript也具有交互作用,但通过辅助功能增强进行升级。

2.1K10

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

在 macOS 下的 Chrome 中,这看起来不错,但是在 Windows 下的 Chrome 中,滚动条始终存在(即使内容很短)。这是因为 scroll-y 会无视内容,一直显示滚动条。...默认情况下,它们并不会继承文档字体,因为浏览它们应用了系统字体。...将其添加到浏览的控制台,页面上所有元素的轮廓都会显示出来。...一些图片必须在裁剪或者不调整大小的情况下显示,并且某些平台会强制用户以特定的尺寸裁剪或上传图片。例如,Dribbble 规定上传的缩略图尺寸为 800 x 600 像素。 18....我的目标是在开发 web 项目时定期检查这份清单。 你在 CSS 中有没有经常遇到什么问题呢?欢迎在评论区分享!

2.1K10
  • 如何使JavaScript更高效

    编译在生成最终的应用程序时,可以花费时间,尽可能地对性能进行优化。Web 应用程序就不能这么奢侈了。因为它们需要在多种浏览、平台和架构上运行,所以不能对它们进行完全地预编译。...也就是说,如果在同一个线程中发生的变化足够快,它们就只会触发一次重排。然而,考虑到 Opera 运行在不同速度的设备上,这种现象并不保证一定会发生。 注意某些元素在重排时显示慢于其它元素。...即使不使用这些数字,只要使用了它们,浏览仍然会缓存改变,这足以触发隐藏的重排。如果这些测量需要重复进行,你就得考虑只测量一次,然后将结果保存起来以备后用。...快速运行的动画在某些 PC 或某些浏览中会运行良好。但是,10ms 几乎已经是浏览能在 100% 占用大多数台式机 CPU 的情况能实现的最小时间间隔。...不过得注意,某些浏览,比如 Firefox 和 Safari,为 unload 事件添加监听会导致快速历史导航失效。此外,禁用提交按钮在 Opera 中也会导致快速历史导航失效。

    1.6K10

    H5的Notification特性 - Web的桌面通知功能

    该通知是脱离浏览的,即使用户没有停留在当前标签页,甚至最小化了浏览,该通知信息也一样会置顶显示出来,这样即使应用程序空闲或在后台也可以向用户发送信息。...一、问题背景 最近工作中客户反馈浏览最小化后,不能及时收到消息,导致不能及时处理工作。经过调研发现可以使用web桌面通知来实现。即使用户最小化浏览后,也可以通过通知及时的进行提。...一个桌面通知生成的正常流程,我们先来看看一个桌面通知是如何生成的: 检查浏览是否支持Notification 检查浏览的通知权限(是否允许通知) 若权限不够则获取浏览的通知权限 创建消息通知 展示消息通知...传统的通知方式,大多是通过站内信(消息),邮件,短信等方式,它们通常需要刷新(跳转)页面、离开应用打开其他应用或终端来查看消息;而桌面通知功能大大的简化了这个过程,消息的传递基本不消耗时间(如果设置setTimeout...必须参数,允许数字、字符串和空 4.3.2 OPTIONS参数 OPTIONS是非必须参数,必须为一个对象,它包含: ps: 部分参数在某些浏览可能会生效,建议使用最新版的谷歌浏览

    2.2K20

    Web 隐藏技术:几中隐藏 Web 中的元素方法及优缺点

    Web 开发中出于多种原因,我们需要隐藏元素。 例如,一个按钮应该在移动中可见,而在桌面视口中隐藏。 或者,在移动设备上隐藏但要在桌面上显示的导航元素。...当浏览加载一个web页面时,它不会渲染带有hidden属性的元素,除非该元素被CSS手动覆盖,这与应用display: none的效果类似。...那么,你可能会问为什么不使用display: none呢?这是个好问题。当通过其hidden属性调用图像选择时,我们可以确定即使CSS因为某种原因没有加载,元素也会被隐藏。...可访问性对hidden的影响 从可访问性的角度来看,hidden将元素完全隐藏在web页面之外,因此屏幕阅读无法访问它。一定要避免使用它来隐藏仅用于表示目的的元素。...控制颜色和字体大小 虽然这两种技术不像我们前面讨论的那样常见,但它们可能对某些用例有用。 颜色透明 通过使文本的颜色透明,它将隐藏在视觉上。这对于只有图标的按钮非常有用。

    5.1K30

    iOS 9人机界面指南(二):设计策略 - 腾讯ISUX

    举个例子,想象一个计算应用使用的是精心设计的,充满艺术感的风格,并且使用了创新的层级去显示大家熟悉的计算元素。这像艺术品一样的细节渲染和创新层级并不会影响用户去理解怎样点击按钮和查看计算结果。...工具栏中只有少数的元素,但是它们是用户在创建内容时所需的所有功能和工具的统一入口。 ? 简化并优先响应用户焦点的检查。对于用户所选的需要修改的对象,iPad版的Keynote能自动控制其工具和属性。...(译者注:特别是根据当前的操作对象而有限选择某些工具。)通常,人们可以在第一检查视图中完成他们需要的所有修改操作。如果他们需要修改那些不常用的属性,他们可以下拉另一个检查视图来进行。 ?...网站也可以通过其他的方法适配桌面网页到iOS端的Safari浏览中: 使键盘适应iOS端的Safari....在iOS版的Safari应用中,弹出式菜单由原生的元素所呈现,这样能提供更好的用户体验。例如,在iPhone上,弹出式菜单会出现在选择(picker)当中,选择里会一个用户可选择的选项列表。

    1.4K21

    从GitHub.com放弃使用jQuery说起

    许多旧代码使用了 pjax 和 facebox 这类 jQuery 插件,因此当我们使用 vanilla JS 替换它们时保持了它们的接口不变。静态类型检查帮助我们对这些重构更有信心。...这样一来,那些使用 JS 增强的 Web 表单和其他 UI 元素通常也可以在浏览禁用 JavaScript 的情况下工作。...在某些情况下,我们能够完全删除某些遗留代码,而不必在 vanilla JS 中重写它们。 这几年来,通过以上所述和诸如此类的努力,我们逐渐减少了对 jQuery 的依赖,直到不再有一行代码引用它。...直到 2017 年 Web Components v1 规范发布并在 Chrome 和 Safari 中实现,我们才开始更广泛地采用自定义标签。...例如, 默认显示原始时间戳,被升级为将时间戳转换为本地时区的时间;当 嵌套在 中时,即使没有 JavaScript 也具有交互功能

    89820

    移动web开发需要注意的二十点

    6、自适应布局模式 在编写CSS时,建议前端工程师把容器(不管是外层容器还是内层)的宽度定死。...至少Apple webapp API已经说到了:我们为了让用户在safari中正常的浏览网页,我们必须保证用户的设备处于任何一个方位时,safari都能够正常的显示网页内容(也就是自适应),所以我们禁止开发者阻止浏览的...12、如何关闭iOS中键盘自动大写 我们知道在iOS中,当虚拟键盘弹出时,默认情况下键盘是开启首字母大写的功能的,根据某些业务场景,可能我们需要关闭这个功能,移动版本webkit为input元素提供了autocapitalize...16、iOS中如何获取滚动条的值 桌面浏览中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的,但在iOS中你会发现这两个属性是未定义的,为什么呢...20、如何解决iOS 4.3版本中safari对页面中5位数字的自动识别和自动添加样式 新的iOS系统也就是4.3版本,升级后对safari造成了一个bug:即使你添加了如下的meta标签,safari

    1.9K20

    5个你可能不知道的CSS属性

    每年都有新的CSS属性被标准化,并在主流浏览中可用。 它们旨在使Web开发人员的工作变得轻松,创造出新颖美丽的网站。...具体来说,这五个CSS属性可以分为以下三类: 书写显示(渲染性能的提升(和属性); 创建新的花式设计() 在开始之前,我想提醒一下,当处理新的CSS属性时,检查他们的支持和潜在的跨浏览问题是一个好习惯...允许几个值,每个值都可以让你限制浏览需要做多少渲染工作。 我们详细分析一下每个值: :默认值。使用此值不应用限制效果。 :该值开启元素的大小限制。这意味着修改元素的大小可以不需要检查其后代。...:该值打开元素的绘制限制。这意味着元素的后代不会显示在其边界之外。例如,如果一个元素是屏幕外(或不可见的),它的所有元素都是屏幕外(或不可见的)。典型的用例是移动设备上的屏幕菜单。...:这个值与strict但像,除了包含size。 这个例子的属性如下所示 在JSFiddle上也能看到.

    1.2K80

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

    然而,在 Windows上,滚动条总是在那里(即使内容很短)。这是因为无论内容如何,scroll-y都会显示滚动条,这时候我们可以使用overflow: auto,它只会在需要时显示滚动条。 ?...在移动设备上,浏览显示一个水平滚动条。 ? 解决方法就是使用 flex-wrap: wrap,这样当水平空间不够时,浏览会帮我们自动换行。...否则,浏览显示一个水平滚动条。 img { max-width: 100%; } 10....使用伪元素 我经常使用伪元素它们为我们提供了一种创建伪造元素的方法,主要用于装饰目的,而无需将其添加到HTML中。...字体与交互式HTML元素不兼容 当为整个文档设置字体时,它们不会应用于input、button、select和textarea等元素它们在默认情况下不会继承,因为浏览将默认系统字体应用于它们

    3.7K10

    WEBAPP开发技巧总结

    6、自适应布局模式 在编写CSS时,我建议前端工程师把容器(不管是外层容器还是内层)的宽度定死。...至少Apple webapp API已经说到了:我们为了让用户在safari中正常的浏览网页,我们必须保证用户的设备处于任何一个方位 时,safari都能够正常的显示网页内容(也就是自适应),所以我们禁止开发者阻止浏览的...12、如何关闭iOS中键盘自动大写 我们知道在iOS中,当虚拟键盘弹出时,默认情况下键盘是开启首字母大写的功能的,根据某些业务场景,可能我们需要关闭这个功能,移动版本webkit为 input元素提供了...16、iOS中如何获取滚动条的值 桌面浏览中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的,但在iOS中你会发现这两 个属性是未定义的,为什么呢...20、如何解决iOS 4.3版本中safari对页面中5位数字的自动识别和自动添加样式 新的iOS系统也就是4.3版本,升级后对safari造成了一个bug:即使你添加了如下的meta标签,safari

    2K20

    Safari 18.0 WebKit 新特性介绍

    你可以随时返回页面菜单并点击“显示隐藏项”来轻松取消隐藏。 视频查看 当你在网页上看到一个显著的视频元素时,可以点击页面菜单中的“视频查看”。视频将放大至填满整个窗口。...扩展支持 现在,用户可以通过 Safari Web 扩展和内容拦截个性化 Mac 上的 Web 应用。导航到 Web 应用的设置菜单,访问所有已安装的内容拦截Web 扩展。...这个属性控制元素是否渲染其内容,对于进行性能优化非常有用。它允许你向浏览传达页面的某些部分可能最初在屏幕外,并建议它们在布局和渲染中被省略。这可以加快页面加载速度。...在 Safari 中,当图像嵌入网页时,浏览显示左通道。而且不需要为 macOS、iOS 或 iPadOS 上的 Safari 提供任何形式的回退——立体 HEIC 文件效果很好。...ARIA 通常元素都有它们需要的标签,但有时某个特定按钮或 UI 没有文本标签。在这种情况下,可以使用 ARIA 提供无障碍标签。

    22810

    CSS硬件加速的好与坏

    浏览不会在动画的每一帧都绘制一次,而是生成DOM元素的快照,并作为GPU纹理(也被叫做层)存储起来。之后浏览只需要告诉GPU去转换指定的纹理来实现DOM元素的动画效果。...然后重新启动下Safari,菜单中找到一个开发菜单打开Web检查就能在右边看到一个tab叫『层』了。选中之后你就可以在Web检查的边栏中看到每个层的内存消耗。...如果你在使用Safariweb检查,选择『层』标签后就能在侧栏看到『绘图』区域。这里的数字代表了Safari提交当前层的新纹理次数。在Colorful Boxes这个demo上试一试。...当有些层不需要的时候,它们不会被销毁。它们会被移到屏幕之外或者设置为透明的。在一些情况下,UI设计时可以规定一个固定的合成层数量。比如下面这个Cover Flow的例子,同时只能显示9张图片。...即使它需要可以显示成千上万的书本封面(在左右滑动时),你也不需要一次性构建这么多合成层。只需要一个小小的修改,那就是在滑动时将旧图片的层移出作为新图片的层使用。用户根本不会感觉到变化。

    1.1K20

    在 css 图层分析这方面,Chrome Devtools 属实不太行

    比如下面这个 gif: 然后,重点来了,这些图层都是为什么创建的呢?什么样式导致的呢? 点击每一个图层,都可以看到导致图层创建的原因! 比如 html,是因为是根元素创建的图层,这个没啥好说的。...回过头来,我们再来聊下 Chrome Devtools,为什么不用它的呢? 因为它确实咋好用。...Chrome Devtools 的图层分析工具 不是我故意黑 Chrome Devtools 的 Layers 工具,确实是咋滴: 首先,界面丑,特别是显示所有图层那里,没有显示图层总数、占据的内存...,也不能直接跳到元素,这点不如 Safari Devtools: 对比下 safari 的: 最重要的是图层创建的原因显示的不行: 显示的信息不够友好: 有的甚至都没显示原因: 综合看下来,在图层调试工具上...总结 浏览通过图层来组织不同元素的渲染。 3D 转换会导致创建图层、元素重叠会导致创建图层、will-change 为某些值时会导致创建图层,等等。

    67220

    HTML文件里的!Doctype有什么作用?

    大多数Web文档的顶部都有doctype声明,它是在新建一个文档时,由Web创作软件草率处理的众多细节之一。很少人会去注意 doctype ,但在遵循标准的任何Web文档中,它都是一项必需的元素。...doctype会影响代码验证,并决定了浏览最终如何显示你的 Web文档。 DOCTYPE的作用是什么? DOCTYPE声明中指出阅读程序应该用什么规则来解释文档中的标记。...我们还可以通过W3C提供的验证工具来检查页面的内容是否符合在DOCTYPE中声明的标准。 常见问题 如果声明doctype会发生什么?如何解决?...请使用 W3C 的验证检查您是否编写了有效的 HTML / XHTML 文档! HTML 标签的浏览支持 支持的浏览包括IE,Firefox,Chrome,Safari,Opera等即所有浏览都支持 声明。

    3.1K30

    备受乔布斯推崇的 PWA,为什么还没有杀死原生应用?

    为什么它们还没有成为 App 的默认格式? ​...有趣的是,直接从网站上安装 App 既快又方便,但如果没有专门的提示和推广元素,用户会不习惯。 这个问题的核心是信任问题。...iOS 推送通知 macOS Ventura 的 Safari 16 将带来 Web 推送功能。即使 Safari 被关闭,也会发送通知。...因此,在某些情况下,Chrome(和其他浏览)会自动阻止推送通知请求——这导致希望合法使用通知功能的开发者更难请求访问该功能。...因此,一旦安装了,你就无法更新 App 在用户主屏幕上显示的样子。 至少直到最近都是这样。 幸运的是,在这方面已经有了一些有趣的进展。现在,桌面 Chrome 浏览支持在安装后修改 App 的名称。

    1.4K10

    Safari 版本更新?开发者的噩梦之旅!

    == "undefined")来做检测,却没想到 Safari 浏览居然只定义某些上下文、却漏掉了其他上下文。难道上下文不该跟标准的 元素拥有同等地位吗?为什么这样呢?...其次,即使把规范奉为圭臬而且作者确实不打算修改,那难道苹果也不关心 Web 兼容性吗?无论如何,为什么不推迟 OffscreenCanvas 的发布?毕竟这才是尊重 Web 兼容性的务实选择。...Safari 15.0 至 15.4 版本中存在一个 WebGL bug,会导致某些 Construct 内容显示空白屏幕。...问题最终在 Safari 15.5 中得到了修复,但苹果未给出任何通知,我们在手动检查各个 Safari 版本时才自行发现。 多年以来,我们一直希望拥有一种能在所有浏览中播放的统一开放音频文件格式。...为什么 Safari 浏览这么不受 Web 开发者待见?

    51420

    数据结构思维 第六章 树的遍历

    我描述了搜索引擎的元素,并介绍了第一个应用程序,一个从维基百科下载和解析页面的 Web 爬行。本章还介绍了深度优先搜索的递归实现,以及迭代实现,它使用 JavaDeque实现“后入先出”的栈。...是实际出现在页面上的文字;其他元素是指示文本应如何显示的标签。 当我们的爬虫下载页面时,它需要解析 HTML,以便提取文本并找到链接。...大多数网络浏览提供了工具,用于检查你正在查看的页面的 DOM。在 Chrome 中,你可以右键单击网页的任何部分,然后从弹出的菜单中选择Inspect(检查)。...Safari 提供了一个名为 Web Inspector 的工具,你可以阅读 http://thinkdast.com/safari。...为什么栈和队列是有用的,可能不是很明显:它们不提供任何列表没有的功能;实际上它们提供的功能更少。那么为什么不使用列表的一切?

    83220

    使用Python进行爬虫的初学者指南

    如果您是为了学习的目的而抓取web页面,那么您不太可能会遇到任何问题,在违反服务条款的情况下,自己进行一些web抓取来增强您的技能是一个很好的实践。...01 爬虫步骤 为什么使用Python进行Web抓取? Python速度快得令人难以置信,而且更容易进行web抓取。由于太容易编码,您可以使用简单的小代码来执行大型任务。 如何进行Web抓取?...我们需要运行web抓取的代码,以便将请求发送到我们想要抓取的网站的URL。服务发送数据并允许我们读取HTML或XML页面作为响应。代码解析HTML或XML页面,查找数据并提取它们。...分析和检查我们想要获取的数据被标记在其下的页面是嵌套的。要查看页面,只需右键单击元素,然后单击“inspect”。一个小的检查元件盒将被打开。您可以看到站点背后的原始代码。...然后我们将提取实际价格和折扣价格,它们都出现在span标签中。标签用于对内联元素进行分组。并且标签本身不提供任何视觉变化。最后,我们将从div标签中提取报价百分比。div标记是块级标记。

    2.2K60

    破茧重生!重新定义Chrome开发者工具

    这个游戏的整个目标是--当一分钟过去,完整的列表显示出来的时候--意识到,"哇,这有很多工具,我甚至不知道它们的存在。" 那么,为什么有这么多?...Venkman 只做JavaScript调试,Aardvark 专注于检查元素,而Console2 显示漂亮的JavaScript日志信息。...即使你从来没有使用过Firebug,而且是在最近才开始你的Web开发之旅,我也愿意打赌这个用户界面感觉很熟悉。...即使是很少使用的工具在这里也是有原因的,而使用它们的少数人可能会依赖它们。...在苹果公司从事Safari Web检查工作的人在2013年左右尝试了类似的东西。他们应用了其他产品的一些设计原则,如XCode或iTunes,试图简化他们的DevTools工具条。

    1.2K106
    领券