为什么我的CSS在Safari中不能像预期的那样工作，但在Chrome上却可以正常工作 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

你不应该依赖CSS 100vh，这就是原因!

顺便说一下，它在安卓手机上甚至不能按预期工作。图片为什么100vh问题会发生在移动设备上？我对这个问题进行了一番调查，发现了其中的原因。简短的答案是，浏览器的工具栏高度没有被考虑在内。...仅使用 CSS 在移动设备上修复 100VH 问题时，使用 vh 的目的是为了简单地创建与视口高度相等的部分。例如，当你在建立登陆页面时，这很常见。...DOCTYPE html> 声明，会使 fill-available 在 Chrome 浏览器上无法正常工作。...图片甚至不能在安卓浏览器上工作: 图片因此，为了解决这个问题，必须从页面中删除 doctype 声明。 2....Safari上的垂直 padding 问题在 min-height（或 height）为 fill-available的元素上添加垂直 padding （bottom 和 top），Safari浏览器上会导致问题

1.9K4 0

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

，有内发光效果还有高光效果，这样的按钮使用CSS3写是无法写出来的，当然圆角可以使用CSS3来写，但高光和内发光却无法使用CSS3编写，这个时候你不妨使用-webkit-border-image来定义这个按钮的样式...为达到适配各种手持设备，建议前端工程师使用自适应布局模式，因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能够正常的显示，...：能否让我们的webapp更加像nativeapp，我不想让用户看见那个输入url的控件条？...10、如何禁止用户旋转设备我曾经也想禁止用户旋转设备，也想实现像某些客户端那样：只能在肖像模式或景观模式下才能正常运行。但现在我可以很负责任的告诉你：别想了!在移动版的webkit中做不到！...因为在iOS中没有滚动条的概念，在Android中通过这两个属性可以正常获取到滚动条的值，那么在iOS中我们该如何获取滚动条的值呢？

2.9K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

WEBAPP开发技巧总结

、 chrome都能够正常的显示，你无需再次考虑设备的分辨率。...10、如何禁止用户旋转设备我曾经也想禁止用户旋转设备，也想实现像某些客户端那样：只能在肖像模式或景观模式下才能正常运行。但现在我可以很负责任的告诉你：别想了!在移动版的webkit中做不到！...至少Apple webapp API已经说到了：我们为了让用户在safari中正常的浏览网页，我们必须保证用户的设备处于任何一个方位时，safari都能够正常的显示网页内容（也就是自适应），所以我们禁止开发者阻止浏览器的...16、iOS中如何获取滚动条的值桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的，但在iOS中你会发现这两个属性是未定义的，为什么呢...因为在iOS中没有滚动条的概念，在Android中通过这两个属性可以正常获取到滚动条的值，那么在iOS中我们该如何获取滚动条的值呢？

3.4K2 0

网页中添加下划线的方法汇总及优缺点

优点易于使用位于文本基线以下默认在 Safari 和 iOS 上会避开下行字母可以换行适用于任意背景缺点在其它浏览器中不能避开下行字母不能改变颜色、粗细或样式 border-bottom...以下是在 Chrome 和 Firefox 中的效果： ? 在 IE、Edge 和 Safari 上的浏览器支持有问题。很难在 CSS 中测试 SVG 滤镜的支持情况。...这意味着在修改完善之前还不能用在任何项目中。这种方法作为概念证明有必要提出来。可以创建漂亮、可交互的下划线，但是需要写一些 JavaScript 才能正常工作。...这一属性比预期的浏览器支持要好——它可以在 Firefox 以及 Safari （需加前缀）中工作。需要注意的是：如果没有清除下行字母，Safari 中的下划线会位于文本之上。 Firefox: ?...这是一个非标准属性，只在 Safari 中正常工作，所以要加 -webkit- 前缀。Safari 默认使用该属性，所以即使没有设置，下划线也会避开下行字母。

3.2K10 0

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

下面的例子分别展示了 Chrome 和 Safari 中的同一个按钮，后者默认会有一个灰色背景。...在 macOS 下的 Chrome 中，这看起来不错，但是在 Windows 下的 Chrome 中，滚动条始终存在（即使内容很短）。这是因为 scroll-y 会无视内容，一直显示滚动条。...CSS 网格布局中关于 auto-fit 和 auto-fill 差异的误解在 CSS 网格布局中，repeat 函数可以在不使用媒体查询的情况下创建响应式列布局。...必须给元素添加 content: "" 属性，同时还要为它设置 display: inline-block ，以使 width 和 height 像预期的那样生效。 image.png 13....p { direction: ltr; } image.png (大图预览) 结论这里提到的所有问题都是我在前端开发工作中最常遇到的。我的目标是在开发 web 项目时定期检查这份清单。

3K1 0

Safari 版本更新？开发者的噩梦之旅！

可以想见，Web 上其他依赖于 zip.js 的项目应该也受到了类似的影响。我在 2 月 17 号上报了这个问题。...于是乎，我直到 4 月 3 号才真正能够验证对新版本做验证，这时候距离 Safari 16.4 的全球发布已经过去了整整一周。在这段时间里，我根本不知道自己的软件能不能在 Safari 上正常运行。...如果苹果能像其他“正常”的网络浏览器开发商一样在修复完成的版本里标记出问题，那以上所有惊心动魄的猜测和焦虑本来都可以避免。哪怕项目的透明度再好上一点点，我们都不至于搞得这么被动。...我想再次强调，我说的这些绝对不是针对任何一位特定的苹果员工。这个错不是苹果中的具体哪个人导致的——事实上，我在前文中也提到，很多苹果员工都把工作做得很好。苹果也绝对不乏聪明和勤奋的头脑。...所以，我真有必要这么纠结吗？对，我觉得有必要。我希望有更多朋友能意识到在 Safari 上正常运行有多么费劲，而且每一次版本更新会给生态系统中的合作伙伴造成怎样的“精神创伤”。

9882 0

如何使用浏览器工具调试PWA

什么是PWA 首先，一个PWA是一个根据设备的支持情况，提供了额外特性的应用，比如：离线工作能力推送通知几乎原生应用的展现和速度资源的本地和缓存但是PWA并不能在不支持最新技术的设备上像正常网站那样工作...清单中可以看到应用的名字（首屏上的简短名字），图表预览，以及一些展现的细节。启动地址：当用户从主屏首屏上启动Web应用是，设备要加载的地址。您可以添加一个活动标识符来区分统计分析中的PWA。...Firefox对PWA以及Service Workers有很大的支持。但是，它的开发者工具不会像Chrome开发工具那样显示出来。...您无法模拟事件或强制更新或绕过Service Workers，如Chrome。我希望，在Firefox这很快将变成可能，以便有更容易的测试体验。...像Chrome一样，当用Cache API使用被“开发工具”的“网络”面板中的Service Worker缓存的资源时，在Transferred列下列出了『Service Worker』： ?

5.5K4 0

测试匠谈 | 微信H5兼容性测试理论和实践经验

为什么微信H5兼容性测试困难？① 移动端设备复杂Android的设备情况：OpenSignal 在 2015 年 8 月发布的基础统计数据可以看到Android的设备复杂度。...只要网站主满意，你的工作就算完成了。我们管理好大家测试的预期（在不同浏览器中提供可接受的用户体验），测试的覆盖范围则是因业务而定。...② 测试方法在实际业务中，几乎没有用户反馈Android微信内置浏览器的兼容问题，很多iOS表现不好的API，在Android上却表现的非常优秀和正常，但我们还是要做相关的测试。...如果前期不能确定自己的业务用户设备范围，可以本文参考中的测试策略。...，但在其他浏览器中无该问题。

1.6K1 0

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

在下面的例子中，同样的按钮在 Chrome 和 Safari 中，后者添加了默认的灰色背景。 ?...在 macOS 上的Chrome上会很好看。然而，在 Windows上，滚动条总是在那里(即使内容很短)。...这是因为Safari不能识别关键字transparent，这里可以通过rgba(0,0,0,0)来解决该问题。请注意下面的截图： ?...向 SVG 添加 fill 有时，在使用 SVG 时，如果在 SVG 中以内联方式添加了fill属性，填充就不会像预期的那样工作。...总结里提到的所有问题都是我在前端开发工作中遇到的最常见的问题，希望能对你们有些帮助。

5.1K1 0

重新定义Chrome开发者工具

你可能在重复使用同样的几个面板--我知道我是这样的！但是，你知道吗？事实证明，在Chrome DevTools（以及其他基于Chromium的浏览器，如Edge）中，有超过30个（30个啊！）...单独的面板。Safari和Firefox的面板较少，但仍可能比你在任何一天使用的都多。当我意识到这一点时，我想到了一个愚蠢的游戏，你可以尝试在一分钟内命名尽可能多的面板。在这里(那是什么工具？)...最后一个例子，Chrome团队在2020年删除了属性侧边栏窗格，但后来在看到人们对它的需求后又将其添加了进来。单纯的使用数字并不能很好地衡量一个工具的价值。...你也可以在浏览器中安装扩展，为DevTools添加新的面板，但在主要框架的扩展之外，并没有很多有用的扩展（例如React）。从事DevTools工作的团队是几乎做了一个网络开发者可能需要的所有工具。...但是多年来，Chrome团队在抽屉里添加了越来越多的东西，特别是那些有用但还没有普及到可以在主标签栏上占有一席之地的次要工具（例如，渲染面板就被添加在那里）。

1.5K10 6

CSS粘性定位是怎样工作的

第二个原因是很多开发者并不能完全理解其工作原理背后的逻辑，这就是我的切入点。 ?...在第一个例子中，大家很容易就能看明白当视口到达定义的位置时，元素会被粘住。例： ? 但问题是，它有时候能用，而有时却不起作用。当它工作时，元素会粘住，但在滚动到其他部分，它会停止粘贴。...当我在包装元素中添加更多元素时，它就能开始正常工作了。这是为什么？这是因为当一个元素被赋予 position: sticky 样式时，粘性项目的容器是它可以粘贴的唯一区域。...粘性元素没有任何要浮动的元素，因为它只能浮动在同级元素上，作为唯一的子元素，它不能浮动。...粘性元素与粘性容器查看在CodePen上的例子： https://codepen.io/elad2412/pen/QYLEdK 理解 CSS 的粘性行为正如我前面说过的那样，CSS 粘性定位的行为与所有其他

2.6K1 0

使用 tabindex 配合 focus-within 巧妙实现父选择器

如果你对 CSS 中是否存在父选择器有疑惑，可以去看看知乎 -- CSS 中能否选取父元素？...而对于元素，稍微有点特殊，存在这样两个问题，即：在 MacOS 的 Safari 和 Firefox 中， **点击元素，不会触发的 focus...在 Windows 的 Safari 和 Firefox 中，点击元素，会触发的 focus 事件，但在被目标元素捕捉到之后，不会继续向上冒泡。什么意思呢？...在 Windows 的 Safari，Firefox 下的表现： ? 在 MacOS 的 Safari，Firefox 下的表现： ?...在 Chrome 上的表现是正常，而在 Windows 的 Safari、Firefox 上，会触发 button 的 focus 事件，但不会触发父元素的 :focus-within 事件，也就是上面说的

1.3K1 0

瀑布流布局终于有了正确的打开方式

我一直在想，都 6202 年了，这事儿为啥还这么复杂？直到最近看到 WebKit 团队发布的 CSS Grid Lanes，我才发现——原来瀑布流布局，真的可以只用 3 行 CSS 搞定。...把布局想象成高速公路堵车 Grid Lanes 的工作原理其实很好理解。想象你在高峰期开车上高速：每辆车（网页上的每个元素）都想往前挤，哪条车道最空就往哪儿并。...但也有好消息：这次各大浏览器厂商终于在标准上达成一致了！不再像以前那样各搞各的私有前缀、各自为政。大家都朝着 grid-lanes 这个统一标准努力，这本身就是个巨大的进步。...我们常说“用对的工具做对的事”，但很多时候，是因为没有对的工具，我们才不得不用错的方式硬搞。瀑布流布局就是典型——它本质上是个布局问题，却一直要靠 JavaScript 解决。...到时候，我们终于可以把那些瀑布流库从项目里删掉，换上 3 行干净的 CSS 了。

2341 0

html精灵图跟img标签,css精灵图怎么使用？

大家好，又见面了，我是你们的朋友全栈君。什么是css精灵图(sprite)？css精灵图怎么使用？下面本篇文章就来给大家介绍一下css精灵图的使用。...其实就是把一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。怎么使用css精灵图(sprite)？...使用精灵图可以减少图片的字节数，如果一张图片是4K，9张就是36K，而将所有图片整合在一张图片上之后，只需要4-5K就可以了。...在整理图片时，不需要纠结图片的取名问题，特别是在大型浏览器中，这种小的图片非常之多。将所有图片整合在一起，只需要取一个综合的名字就可以了，这样也可以大大提高工作效率。...精灵图在后期维护上也带来了一定麻烦，因为所有的图片是在一张图片上，甚至位置都是相互影响的，所以一旦改变了一个，可能整张精灵图都需要重新做。

2.5K3 0

CSS设置复选框和开关的样式

在此示例中，字体大小已放大至200%，但复选框仍保持其根大小，即13.333333px：在本教程中，我们将剖析浏览器的默认复选框，看看是否可以做得更好。...对于 Chrome 中的边框颜色，它与系统颜色匹配ButtonBorder，但由于 Safari 使用更浅的 ButtonBorder颜色，我们将使用GrayCanvas在两种浏览器中都适用的颜色。...这就是为什么我喜欢系统颜色！接下来，让我们添加浏览器在未选中的复选框上使用的相同悬停效果。...Safari 是唯一支持系统颜色的浏览器AccentColor，因此我们需要为此创建自己的变量--_accent，在 Mac 上对应于#0075ff： [type=checkbox] { --_accent..."> — 或者全力以赴并创建老式复选框：关于圆形复选框的注释：这是不好的做法，正如您可以在这篇精彩的文章中读到的那样。

1.5K1 0

40个重要的HTML 5面试问题及答案

使用ID值如何应用CSS样式？ CSS中列布局的用处是什么？请解释一下CSS盒子模型？请解释一下CSS 3中的一些文本效果？ web workers是什么，为什么我们需要web workers？...最近当我找工作的时候，我发现很多问题都是围绕HTML 5和它的新功能展开的。所以，下面我将列出40个有助于你提高相关HTML 5知识的重要问题。...这些问题并不能保证你一定能找到工作，但可以肯定的是，如果你想提升自己关于这个主题的素养，那么它们一定是有用的。祝你求职成功。 ? SGML、HTML、XML和XHTML之间的关系？...例如，在SGML，你必须拥有成对的开始和结束标签，但在XML中，你可以使用自动关闭的标签。 XHTML源自于使用HTML 4.0的XML。你可以参考XML DTD如以下所示的代码片段。我不输入，HTML 5能工作吗？ No，浏览器将无法识别HTML文件，并且HTML 5标签将无法正常工作。哪些浏览器支持HTML 5？

5.5K13 0

测试开发者必看的自动化测试全景指南

接口自动化测试，就是通过脚本模拟接口的请求和响应，验证接口的功能、性能、安全性是否符合预期。为什么要做接口自动化？...移动端自动化测试：针对手机 APP 的自动化测试，验证 APP 在手机或模拟器上的操作是否符合预期（比如点击 “我的” 按钮能否跳转到个人中心、下拉刷新是否正常等）。...依然承担了大部分的测试工作，自动化的价值没有体现出来。为什么会出现这种情况？...2.2.4 验证环境环境搭建完成后，我们可以通过一个简单的命令验证是否正常工作：打开 Python 交互式环境（CMD 中输入python）；输入以下代码： from selenium...首先，我们需要确定搜索框的 CSS_SELECTOR：打开 Chrome 浏览器，访问百度首页；右键点击搜索框，选择 “检查”（或按 F12 打开开发者工具）；在开发者工具的 Elements 面板中

2261 0

不使用jquery只执行一次事件侦听器函数

我制作了一段代码,用箭头上下垂直移动6个项目前面的元素.当按下enter时,我将加载一组带有该项目的图像.代码工作正常,但在输入命中后,这段代码需要停止,所以我可以用箭头键做其他事情并输入.现在它只是在输入被击中后继续前进....我尝试使用var检查,但是我似乎无法从交换机内部更改变量.有人知道如何使这项工作？...55,Firefox 50,Safari(WebKit). 1> Mati Tucci..：现在你可以once在options对象中传递一个布尔值,如下所示:document.body.addEventListener....这看起来就像你在这里几乎所做的那样.我完成了逻辑并减少了代码: if(event.keyCode == 13 && enterPushed){ enterPushed = true; startup...(i); } 这不是`.removeEventListener()`的工作原理.您需要提供原始功能.

1K1 0

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

没听错，确实是 safari 的，不是 chrome devtools，图层分析上 chrome devtools 不太行，具体情况后面说。...而且图层之间的上下关系也可以直观的看出来：是不是超方便！回过头来，我们再来聊下 Chrome Devtools，为什么不用它的呢？因为它确实不咋好用。...，也不能直接跳到元素，这点不如 Safari Devtools：对比下 safari 的：最重要的是图层创建的原因显示的不行：显示的信息不够友好：有的甚至都没显示原因：综合看下来，在图层调试工具上...Safari Devtoos 在图层调试工具上确实很有亮点，这就像我们的能力发展一样，可以不用每个方面都强，但一定要有一个方面是比较突出的亮点，这样才会比较有竞争力。扯远了，收。...Chrome Devtools 也有 Layers 工具，但在 css 图层分析这方面，Chrome Devtools 属实不太行。

9562 0

聊一聊跨浏览器测试验证点梳理

用户的非公开信息存储在Firefox浏览器缓存中，chrome浏览器就没有这样的问题。浏览器差异主要来自五个方面：渲染引擎、JS引擎、CSS支持、API实现和用户代理特性。...测试策略上要抓住20%的关键差异点解决80%的问题，比如Chrome和Safari的CSS前缀问题就比Edge的音频解码问题更常见。...浏览器前进/后退按钮功能是否正常？刷新页面后状态是否保持或恢复预期？表单功能所有表单元素（文本框、单选/复选、下拉框、文件上传、按钮）是否可用、可聚焦、可交互？表单提交是否正常工作？...事件处理（点击、悬停、滚动、键盘事件等）是否在所有浏览器中响应一致？动画和过渡效果是否流畅且符合预期？是否有卡顿或不渲染？单页应用的路由切换是否正常？...移动设备上是否禁止了缩放或设置了正确的缩放比例？HTML/CSS 渲染一致性页面整体结构、文本、图像、容器、边距、内边距等是否在所有目标浏览器中渲染一致？

7172 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭