为什么"text-align-last“不能在Safari上运行，而且行为怪异？

"text-align-last" 是一个 CSS 属性，用于指定最后一行文本的对齐方式。然而，在 Safari 浏览器上，这个属性无法正常运行，并且会表现出奇怪的行为。

这是因为 Safari 浏览器对于一些 CSS 属性的支持存在一些限制和差异。在 Safari 中，"text-align-last" 属性只在某些特定的文本容器中生效，例如块级元素或行内块级元素。而在其他类型的元素上，如行内元素或表格元素上，该属性将被忽略。

此外，即使在支持的元素上使用 "text-align-last" 属性，Safari 的行为也可能与其他浏览器不同。这可能导致在 Safari 上呈现的文本对齐方式与其他浏览器不一致，从而导致行为看起来怪异。

为了解决这个问题，可以考虑使用其他的 CSS 属性或技术来实现类似的效果。例如，可以使用伪元素 "::after" 来添加一个占位符元素，并对其应用对齐样式，以达到最后一行文本对齐的效果。

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

腾讯云官网：https://cloud.tencent.com/
云服务器 CVM：https://cloud.tencent.com/product/cvm
云数据库 MySQL：https://cloud.tencent.com/product/cdb_mysql
云原生应用引擎 TKE：https://cloud.tencent.com/product/tke
人工智能平台 AI Lab：https://cloud.tencent.com/product/ailab
物联网平台 IoT Hub：https://cloud.tencent.com/product/iothub
移动开发平台 MDP：https://cloud.tencent.com/product/mdp
云存储 COS：https://cloud.tencent.com/product/cos
区块链服务 BaaS：https://cloud.tencent.com/product/baas
腾讯云元宇宙：https://cloud.tencent.com/solution/metaverse

相关·内容

前端翻译：Activating Browser Modes with Doctype

准标准模式 Firefox、Safari、Chrome、Opera（从7.5开始）、IE8910，有有“准标准模式”，其不按CSS2标准而实现了vertical sizing of table...回顾历史我们会发现，在不区分“标准模式”和“近标准模式”，默认使用“准标准模式”的行为特征，并使用“标准模式”的CSS特征会让Web更美好。不过我们依然应优先使用“标准模式”。 ...我没有在塞班自带的浏览器上测试过，也没有在Konqueror上作充分地测试，所以不敢保证其准确的行为模式。...我不建议使用XHTML的doctype，以为将XHTML作为text/html处理是有害的。如果你使用XHTML作为doctype，在IE6下会切换为怪异模式。 ...关注点：你的网站在微软的黑名单中，而且你不希望用户使用模拟IE7模式解析网站。

9327 0

javascript 中的 delete

要回答这个问题,我们需要了解在Javascript中 delete操作符的工作机制: 什么可以被删除,什么不能被删除以及为什么.现在我将试图详细解释其原因.我们将发现 Firebug “怪异”的行为并认识到并不是所有都是怪异的...自信地解释 “当删除的目标不是一个对象的 property 时,delete 应该是无操作”.现在我们理解了 delete行为的核心,就很清楚地知道,这个答案是相当不准确的.delete不区分变量和属性...作为一根bonus,下面是IE中 delete 行为的一个怪异的 case : [javascript] view plaincopy var element = document.createElement...要回答这个问题,我们需要了解在Javascript中 delete操作符的工作机制: 什么可以被删除,什么不能被删除以及为什么.现在我将试图详细解释其原因.我们将发现 Firebug “怪异”的行为并认识到并不是所有都是怪异的...自信地解释 “当删除的目标不是一个对象的 property 时,delete 应该是无操作”.现在我们理解了 delete行为的核心,就很清楚地知道,这个答案是相当不准确的.delete不区分变量和属性

3K8 0

Safari浏览器正在杀死Web

而且可以肯定的是，Safari 当中的 WebKit 引擎确实远不及其他浏览器方案。...用于构建 PWA 的相关 API 可以实现全屏运行（无浏览器 UI）、发送通知与警报、离线状态运行以及通过主屏幕图标启动等等。目前最具知名度的 PWA 案例当数 Twitter 与 Uber。...热衷于做 Web 应用的开发者们对上述问题自然是非常关心的，但苹果则不然——他们是世界上财力最雄厚的企业之一，并不担心自己的倒行逆施行为会惹恼 Web 开发者群体。...就算不担心隐私，这些 API 也会减弱手机的电池续航能力。我本人并不是 iOS 用户，但苹果在隐私问题上的坚定立场确实让我相当心动。...没错，既然 Invidious（YouTube 的开源前端替代产品）都能在无需 JavaScript 的前提下加载 YouTube 内容，为什么 YouTube 自己不行？

1K2 0

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

于是乎，我直到 4 月 3 号才真正能够验证对新版本做验证，这时候距离 Safari 16.4 的全球发布已经过去了整整一周。在这段时间里，我根本不知道自己的软件能不能在 Safari 上正常运行。...== "undefined"）来做检测，却没想到 Safari 浏览器居然只定义某些上下文、却漏掉了其他上下文。难道上下文不该跟标准的元素拥有同等地位吗？为什么不这样呢？...我希望有更多朋友能意识到在 Safari 上正常运行有多么费劲，而且每一次版本更新会给生态系统中的合作伙伴造成怎样的“精神创伤”。...在我看来，这些行为相当于是在忽视甚至迫害 Web 开发群体。我非常希望苹果能尽快做出改变。我希望 Safari 能成长为出色的浏览器。我希望开发出能在 Safari 中顺畅运行的精彩内容。...为什么 Safari 浏览器这么不受 Web 开发者待见？

4882 0

Localhost何时要用HTTPS？

为什么你的开发网站应该更具有安全性为了避免遇到意想不到的问题，你希望你的本地开发网站尽可能地表现得像你的生产网站。...你需要在本地测试或重现HTTP/2或更新的特定行为。例如，如果你需要测试HTTP/2或更新版本的加载性能。不安全的HTTP/2或更新版本不被支持，甚至在localhost上也不被支持。...这不是一个详尽的列表，但是如果你遇到这里没有列出的情况，你就会知道：事情会在http://localhost上出意外，或者它的行为不太像你的生产网站。...而且，这并非不可能：在2020年，有超过1500个顶级域名，而且这个名单还在不断增加。coffee, museum, travel，以及许多大公司的名称（甚至可能是你正在工作的公司！）都是顶级域名。...试试吧：在localhost上运行任何网站，在Chrome或Edge中访问http://.localhost:。这可能很快就能在Firefox和Safari中实现。

3.3K5 1

JavaScript 严格模式(use strict)

JavaScript 严格模式（strict mode）即在严格的条件下运行。...支持严格模式的浏览器:Internet Explorer 10 +、 Firefox 4+ Chrome 13+、 Safari 5.1+、 Opera 12+。...// 不报错 myFunction(); function myFunction() { "use strict"; y = 3.14; // 报错 (y 未定义) } 为什么使用严格模式...: 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为; 消除代码运行的一些不安全之处，保证代码运行的安全；提高编译器效率，增加运行速度；为未来新版本的Javascript做好铺垫...另一方面，同样的代码，在"严格模式"中，可能会有不一样的运行结果；一些在"正常模式"下可以运行的语句，在"严格模式"下将不能运行。

9453 0

前端科普文：为什么<!DOCTYPE> 不可或缺

但是这只是极少数的情况，在大部分情况下 Almost Standards 和 Standards 两种模式是一致的，所以我们一般不专门区分二者。...小知识：一说世界上第一款拥有两种渲染模式的浏览器为 IE6，另一说是 IE5 for Mac，你没有看错，Safari（2003 – ?）...而且 IE 和 FF 怪异模式渲染效果不一样，这也很好理解，毕竟没遵循 W3C 标准前，每家的标准都有自己一套。在 FF 的页面可以右键查看其 Page Info。...HTML5 不基于 SGML，所以不需要引用 DTD。小知识：在 ie6 中，如果在 doctype 声明前有一个 xml 声明(比如: <?...为了避免浏览器进入怪异模式（事实上，现实中已经几乎没有网页需要用浏览器的怪异模式去解析，浏览器的 Quirks Mode 仅仅是为了向后兼容），所以，请确保在 HTML 页面的首行写上：

9048 0

任务，微任务，队列和时间表

这真的很奇怪，因为Firefox 39和Safari 8.0.7始终如一地正确。 为什么会这样要了解这一点，您需要了解事件循环如何处理任务和微任务。第一次遇到这个问题可能会让您大吃一惊。...深呼吸… 每个“线程”都有自己的事件循环，因此每个Web工作者都有自己的事件循环，因此可以独立执行，而同一源上的所有窗口都可以共享事件循环，因为它们可以同步通信。事件循环持续运行，执行所有排队的任务。...这就是为什么promise1并promise2在之后记录日志的原因script end，因为当前正在运行的脚本必须在处理微任务之前完成。...切向有关学徒， “不，他们还没准备好！”。别理他，你准备好了。...我在尝试为使用Promise而非怪异IDBRequest对象的IndexedDB创建简单包装库时遇到了此问题。

2.2K2 0

苹果拒绝支持PWA的行为对Web贻害无穷！

作者认为Google已经建立了一个PWA的基线清单，并且其中的许多功能在移动版的 Safari 上也是支持的: 站点通过HTTPS提供服务页面对平板电脑和移动设备的响应起始网址在离线时加载（实际上在...固定标题闪烁（我最大的心病，这就是为什么我最终在自己的产品上（ brewlog.com ）禁用它的原因）在 300ms 延迟后终于从移动版 Safari 中移除，却没有在全屏模式下移除（Apple没有回应...这感觉就像是把我的应用运行在一个 webview/native 包装器上一样。我曾经尝试学习并使用 Ionic/Angular，但始终对它没有什么感觉。...我也并不认为大多数的苹果公司员工都在故意忽视这一点: 可能会有一些高层或董事会成员告诉大家，不要把时间浪费在不符合应用商店盈利模式的技术上。这仅仅是资本主义特色吗？只是谋求他们自己的好处吗？不！...还记得我们把这种行为称作什么吗——这对Web贻害无穷。 ----

1.9K3 0

react+redux+webpack教程1

前端开发框架凭借JS极其灵活强大的特性模样越来越“怪异”，正是这怪异让我们对前端开发把玩不尽。好吧，说把玩这些技术有些过于装13了。...语言上嘛，我原本推崇coffee，而且也有现成的coffee-jsx编译器，但是看react社区都对ES6青睐有加，了解了ES6的特性后，觉得一部分跟coffee挺像，还有一些确实超越了coffee，...看名字就知道我要用的几个东西它大部分都包含了，除了webpack、react、redux，它还包含了ES6编译器babel，还支持less、sass、stylus等常见样式语言编译器，还配置好了热加载，让你代码一保存就能在浏览器上看到效果...actions目录下放咱们的行为文件，行为就是指要发生点啥。 reducers里面的东西功能就是对行为进行响应，根据行为的类别和提供的数据对状态进行变更。...再看看src里面其它几个目录：store负责管理状态，也就是提供派发行为的方法，让reducer去监听，然后改变状态。实际上在开发中我们基本不需要动这里的代码。

7755 0

web前端常见面试题

怪异模式（Quirks Mode）用于模拟旧浏览器的行为。...标准模式不包含，标准模式下可以通过设置 box-sizing: border-box 将标准盒模型转化成怪异模式下的盒模型。怪异模式下，当内容超出容器高度时，会将容器拉伸，而不是溢出。...在点击子元素时，浏览器运行了两种不同的阶段：捕获阶段和冒泡阶段。...捕获阶段的行为：浏览器检查元素的最外层祖先，是否在捕获阶段中注册了一个onclick事件处理程序，如果是，则运行它；然后，它移动到中单击元素的下一个祖先元素，并执行相同的操作...，可以将事件绑定到父元素上，并让子节点上发生的事件冒泡到父节点上，利用 e.target 属性可以获取到当前触发事件的子元素。

2.3K2 0

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

在什么环境下，并且为什么这样？麻烦您提供一个跳转到该标准说明的链接。最佳回复下面列表里的大部分内容，我们大多数人都应该已经听过了。...界面和用户体验应意识到浏览器实现标准不一致，并确保你的网站能在所有主流浏览器上合理运行。...至少起码在最近的 Gecko 引擎（Firefox）、Webkit 引擎（Safari 和一些移动端浏览器）、Chrome、支持 IE 浏览器（利用 Application Compatibility...知道并不是所有的爬虫都是好的，有些爬虫的行为并不好。...这里的目的是避免浏览器的怪异模式，并让它们更容易在非传统浏览器（如屏幕阅读器和移动设备）上运行。搞懂浏览器是如何处理 JavaScript。

1.2K5 0

「重学」从零开始：你知道的、不知道的DOCTYPE

内容摘要：什么是混杂模式、近标准模式和标准模式如何查看页面的渲染模式文档类型的种类标准类型下的怪异行为（很有意思哟） ---- 在开始学习前端之前，你总会需要创建一个 HTML。...一、混杂模式和标准模式很久很久以前，web 页面主要运行在两类浏览器：网景的 Navigator 和微软的 IE。...混杂模式，也成为怪异模式，会兼容 Navigator 4 和 IE 5 的非标准行为。近标准模式会兼容少数的混杂行为，可以理解为过渡模式。标准模式只兼容符合标准描述的行为。...标准模式下的“怪异”行为我们应该都遇到过这个问题，div 里面如果装着一个 img，会被无故撑高几个像素。效果如下图所示（示例链接[4]）： ? 这个很奇怪。...因此这种情况下你看到的跟父元素的底部存在几个像素的间隙，这实际上是为”字母尾巴“预留的。这一现象虽然怪异，但也是标准对于文本对齐的一种规范处理。

5263 0

灵活运用CSS开发技巧

Layout Skill 使用vw定制rem自适应布局要点：移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size，结合vw单位和calc()可脱离JS的控制场景：rem页面布局(不兼容低版本移动端系统...在线演示使用text-align-last对齐两端文本要点：通过text-align-last:justify设置文本两端对齐场景：未知字数中文对齐兼容：text-align-last 代码：在线演示...Skill 使用overflow-scrolling支持弹性滚动要点：iOS页面非body元素的滚动操作会非常卡(Android不会出现此情况)，通过overflow-scrolling:touch调用Safari...在线演示使用+或~美化选项框要点：使用+或~配合for绑定radio或checkbox的选择行为场景：选项框美化、选中项增加选中样式兼容：+、~ 代码：在线演示 ?...在线演示使用animation-delay保留动画起始帧要点：通过transform-delay或animation-delay设置负值时延保留动画起始帧，让动画进入页面不用等待即可运行场景：开场动画

4.6K2 0

浏览器测试的三大挑战及解决方案【译】

随着时间的推移，客户的注意力持续时间越来越短，如果网站加载看起来有问题，他们会毫不犹豫地按下浏览器上的后退按钮。那么，有什么解决办法让Web应用程序和网站在每个浏览器、设备和平台上都能完美运行吗？...跨浏览器测试，为什么重要简单来说，跨浏览器测试是确保 Web 应用程序的功能在不同浏览器、浏览器版本和操作系统之间保持一致的过程，从而为其用户提供轻松的用户体验。...让我们看看为什么跨浏览器测试是必不可少以及它如何帮助获得更好的用户体验：轻松比较多个浏览器的 UI 设计和功能。各种浏览器和平台上提供一致的行为和更好的用户体验。...这是一项繁琐的任务，因为它需要一个专门的团队来管理它，而且必须承担高昂的成本。此外，它非常耗时，并且经常存在可扩展性问题。云上的网站测试促进了协作虚拟平台，减少了设置和维护内部基础设施的成本。...但是，所有用户不会都使用的最新版本，而且随着时间往前走，更新的版本又会出现。相反，可能需要确保客户在旧操作系统和过时浏览器（如 IE 和旧版 Edge）上的体验。因此，手动测试所有组合是不可能的。

3681 0

【前端】：浏览器渲染模式

在很久以前的网络上，页面通常有两种版本：为网景（Netscape）的 Navigator准备的版本以及为微软（Microsoft）的 Internet Explorer准备的版本。...当 W3C 创立网络标准后，为了不破坏当时既有的网站，浏览器不能直接弃用这些标准。因此，浏览器采用了两种模式，用以把能符合新规范的网站和老旧网站区分开。...在怪异模式下，排版会模拟 Navigator 4 与 Internet Explorer 5 的非标准行为。标准模式下，行为即由 HTML 与 CSS 的规范描述的行为。...在接近标准模式下，只有少数的怪异行为被实现。 ? 图1-1：浏览器渲染引擎族谱 ? 2. 浏览器如何决定用哪个模式？浏览器使用文件开头的 DOCTYPE 来决定用怪异模式处理或标准模式处理。...DOCTYPE html>，是所有可用的 DOCTYPE 之中最简单的，而且是HTML5 所推荐的。

1.4K2 0

我碰到的那些面试题js及es6(1)

let var const 的区别 Const定义的变量不可以修改，而且必须初始化 Var定义的变量可以修改，如果不初始化会输出undefined，不会报错 Let是块级作用域，函数内部使用let定义后...当js引擎查找对象的属性时，先查找对象本身是否存在该属性，如果不存在，会在原型链上查找，但不会查找自身的prototype Html标准是什么，什么是怪异模式所谓的标准模式是指，浏览器按W3C标准解析执行代码...；怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。...标准模式是W3C出台标准之后才出现的，也就是说在W3C标准出台之前，浏览器一直运行在怪异模式。...浏览器支持：chrome、Safari1.5+、opera都支持，IE9+, 若arr为空数组，则map方法返回的也是一个空数组。

2.3K2 1

面试官：DTD 有什么作用？

怪异模型使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以称之为怪异模式。...二者都有什么差别在怪异模式下，排版会模拟 Navigator 4 与 Internet Explorer 5 的非标准行为。为了支持在网络标准被广泛采用前，就已经建好的网站，这么做是必要的。...在标准模式下，行为即（但愿如此）由 HTML 与 CSS 的规范描述的行为。使用时需要注意什么？...离线 & 存储：能够让网页在客户端本地存储数据以及更高效地离线运行。多媒体：使 video 和 audio 成为了在所有 Web 中的一等公民。...良好的语义化代码可以直接从代码上就能看出来那一块到底是要表达什么内容。 为什么要使用HTML语义化标签？

9821 0

为什么我十分喜欢C，却很不喜欢C++？

然而，与自动变速箱相比，这种车辆的发动机能量更大，而且你可以预测性能，还可以炫车技，这些在其他车辆上都是不可能的。这与C++有什么关系？下面，我们来说一说 C++，其实我不讨厌 C++。...最终，这门语言就变得有点怪异，没人能够完全掌握，而且许多功能都是抄袭的其他语言。基本上每个人在编写代码的时候，都会选择一个 C++的子集，然后忽略其他功能的存在。...例如，如果我知道目标及其使用了两个协处理器，为什么编译器会选择另一种方式，仅仅是为了获得理论上的优化？同样的问题也适用于移位运算。...我同意，在重叠的内存区域上使用 memcpy()，不同的实现可能会给出不同的行为（现代的 x86 实现会从区域尾部开始复制），而且还依赖于地址的相对位置，但其他的规则就没什么道理了。...我无法想象为什么这种行为被禁止，其原因只可能是编译器优化。这样就不可能利用联合体将整数转换成浮点数。Linus 也曾吐槽过这一点，我就不用重复了。

7441 0

React 中的最新 Ref 模式

那么为什么要这样做呢？好吧，让我们考虑何时使用 useRef。当你想跟踪一个值但不想在更新它时触发重新渲染时，就可以使用useRef。所以在例子中，我们正试图跟踪callback。...但是为什么不使用useState呢？是否可以在实际的状态值中跟踪这个最新的回调值？我们不想使用useState，因为当更新到最新值时，不需要触发组件重新渲染。...实际上，在我们的例子中，如果尝试这样做，将触发一个无限循环（试试看吧）。...由于不需要也不希望在将callback更新为最新值时重新渲染组件，这意味着我们也不需要（而且实际上不应该）将它包含在useEffect、useCallback或例子的useMemo依赖数组中。...因此，如果将 ref.current 包含在依赖项数组中，你将触发怪异且难以调试的行为。

1511 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云