::after 1px 间隔线在 Safari 显示颜色不同于其它的问题

nemo 发布于2019-08-30 15:43 / 460人阅读

摘要：前言在一个菜单面板的时候，把间隔线设置成了绝对像素，生成的效果是下面这样的，在一个线跟其它的不一样。但在上就不会出现这问题。解决细找问题，找出来了，我在内写的是，也就是说，在纵向压缩的时候，压缩的是。换成用，也就是用的主体。

前言

在一个菜单面板的时候，把间隔线设置成了 1 绝对像素，生成的效果是下面这样的，在一个线跟其它的不一样。但在 Chrome 上就不会出现这问题。

width: 100%;
bottom: 0;
left: 0;
content: "";
display: block;
border-bottom: 1px solid #8E8E93;
position: absolute;
transform-origin: 0 100%;
transform: scaleY(0.5);

解决

细找问题，找出来了，我在 ::after 内写的是 border-bottom ，也就是说，在纵向压缩的时候，压缩的是 border。
换成用 background-color ，也就是用 after 的主体。

width: 100%;
bottom: 0;
left: 0;
content: "";
display: block;
background-color: #8E8E93;
height: 1px;
position: absolute;
transform-origin: 0 100%;
transform: scaleY(0.5);

完成

对比

前

后

GPU云服务器云服务器 cn域名比其它域名有什么问题 safari不支持webrtc Webrtc 不支持safari 国内不显示云主机的服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116060.html

::after 1px 间隔线在 Safari 显示颜色不同于其它的问题

摘要：前言在一个菜单面板的时候，把间隔线设置成了绝对像素，生成的效果是下面这样的，在一个线跟其它的不一样。但在上就不会出现这问题。解决细找问题，找出来了，我在内写的是，也就是说，在纵向压缩的时候，压缩的是。换成用，也就是用的主体。前言在一个菜单面板的时候，把间隔线设置成了 1 绝对像素，生成的效果是下面这样的，在一个线跟其它的不一样。但在 Chrome 上就不会出现这问题。 width:...

chnmagnus 2019-08-02 16:10 评论0 收藏0
::after 1px 间隔线在 Safari 显示颜色不同于其它的问题

摘要：前言在一个菜单面板的时候，把间隔线设置成了绝对像素，生成的效果是下面这样的，在一个线跟其它的不一样。但在上就不会出现这问题。解决细找问题，找出来了，我在内写的是，也就是说，在纵向压缩的时候，压缩的是。换成用，也就是用的主体。前言在一个菜单面板的时候，把间隔线设置成了 1 绝对像素，生成的效果是下面这样的，在一个线跟其它的不一样。但在 Chrome 上就不会出现这问题。 width:...

Julylovin 2019-08-23 16:43 评论0 收藏0
csslint 语法建议规则

摘要：以下为正确示例规则说明与示例规则此规则意在防止在及早期游览器上因为解析字体链接的而产生的错误。如下这里类指明了背景图片，其它类则指明背景图片的位置。文章为csslint中文版译文，点击原文可查看英文版，如遇到翻译错误或错别字啥的，请留言指出~ 规则列表如下 adjoining-classes box-model box-sizing bulletproof-font-face co...

leoperfect 2019-08-30 11:22 评论0 收藏0
偏门却又实用的 CSS 样式

摘要：实现不换行自动换行强制换行不换行自动换行强制换行常用的选择器以下代码是选择父类下第一个子节点，元素，建议学习这个样式属性的使用，很实用的。不允许负值用百分比指定起止色位置。::-Webkit-Input-Placeholder input 的 H5 placeholder 属性，很好用，但不能直接改这个文字颜色，所以目前的解决方法就是用::input-placeholder属性来改。配合 ...

Michael_Ding 2019-04-23 11:55 评论0 收藏0