goTOP
January 1, 2025

Apao garden Mac Safari 修正紀錄

| |
最新資訊 | 閱覽(127) | Posted by apao at 15:33
經由朋友介紹我的植物介紹網站才知道,在Mac中的網頁顯示有問題,於是我就花了許多時間去找,這只有Mac OS上才出現的問題。
https://plant.apaostudio.com/

問題狀況模擬:
網頁中負責畫面控制的CSS 中 article 中出現以下文字排列,但是在Windows電腦與Android手機顯示上,我卻沒有發現有任何問題。
在主題(theme)找了老半天,也查不出真相,於是採取檢查文法的方式,逐步找到問題CSS的地方,但所有CSS裡看不見關於以下的設定。

letter-spacing

▼十分像是被加入了魔法般,被強制設定了(模擬)
letter-spacing: 1em;

▼文字依照設定被均勻分布的感覺(模擬)
點擊在新視窗中瀏覽此圖片
▼也十分像是被這樣設定了(模擬)
letter-spacing: 10px;

▼在Safari與Chrome中(模擬)出現的狀況,當時忘記要紀錄問題畫面。
點擊在新視窗中瀏覽此圖片

於是我將CSS定義完整修正之外, article 設定修改成為以下,Mac中的Chrome修復了
letter-spacing: normal;

▼Mac中的Chrome中的顯示(但也有可能我少了「;」以結束CSS定義)
點擊在新視窗中瀏覽此圖片

再將CSS article設定修改成為以下,Mac中Safari也修復了
letter-spacing: 1px;

▼Mac中的Safari中的顯示
點擊在新視窗中瀏覽此圖片

▼SAMSUNG A53中瀏覽器的顯示
點擊在新視窗中瀏覽此圖片

▼SAMSUNG A53中Chrome的顯示
點擊在新視窗中瀏覽此圖片

▼Lenovo P3 WIN10中Chrome的顯示
點擊在新視窗中瀏覽此圖片

▼Lenovo P3 WIN10中Firefox的顯示
點擊在新視窗中瀏覽此圖片

▼Safari(iPad OS17.5.1)
點擊在新視窗中瀏覽此圖片

▼Safari(iPhone OS14.1)
點擊在新視窗中瀏覽此圖片

這困擾許多花友的顯示問題,就在這瞬間我解決了。

▼不過,Mac OS 在顯示UTF-8 的時候,字形還是有些遺憾,像是(蓪)草的字型,仍然沒辦法顯示很正常
點擊在新視窗中瀏覽此圖片
Facebook twitter LINEk
文章来自: 本站原創
0 Comment(s)
我要發表評論
暱稱
密碼 [ 訪客無需密碼 ]
電郵
網址
開啟HTML 開啟UBB 開啟表情 隱藏 記住我