::after 1px 間隔線在 Safari 顯示顏色不同于其它的問題

nemo 發布于2019-08-30 15:43 / 457人閱讀

摘要：前言在一個菜單面板的時候，把間隔線設置成了絕對像素，生成的效果是下面這樣的，在一個線跟其它的不一樣。但在上就不會出現這問題。解決細找問題，找出來了，我在內寫的是，也就是說，在縱向壓縮的時候，壓縮的是。換成用，也就是用的主體。

前言

在一個菜單面板的時候，把間隔線設置成了 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 國內不顯示云主機的服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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
【譯】22個必備的CSS小技巧

摘要：當它被選中時，一個設置在里的編碼的字符將會顯示出來。接著為我們的復選框添加一些動畫效果這里是所有的編碼，以及可以在這里進行體驗。這是一個新的叫做的表達式。設置介于和之間的最大最小值。至今并未得到全面的支持。原文鏈接：22 Essential CSS Recipes更多譯文將陸續推出，歡迎點贊+收藏+關注我的專欄，未完待續…… 大家好，今天我們將會介紹一些非常實用的CSS小技巧，讓我...

Cristic 2019-08-29 10:56 評論0 收藏0