CSS 和 HTML 在 iOS 和 MacOS Safari 甚至 Chrome 中都无法正确显示答案

【问题标题】：CSS and HTML doesn't shows properly in iOS and MacOS Safari even ChromeCSS 和 HTML 在 iOS 和 MacOS Safari 甚至 Chrome 中都无法正确显示
【发布时间】：2020-08-29 05:33:24
【问题描述】：

我有以下问题：我有这个正在建设中的网站https://endertainment.com，它是用 PHP 和 MySQL 从头开始构建的，就像我做的其他任何事情一样。问题是当您从 Mobile Safari 或 Safari 访问该网站时，该网站并未显示所有必须显示的元素。当您从 Android（任何浏览器）或 Windows 甚至在 Linux 中访问时，该网站可以很好地显示任何元素。我已经在 BrowserStack 和 CrossBrowserTesting... 中运行了测试，两者都显示相同的结果；网络没有正确显示。我已经删除了每个 flexbox 属性并改用 inline-block。例如，这个其他网站（https://tuticketazo.com）也处于建设状态，使用与https://endertainment.com相同的结构。我已经进行了更改域指向的服务器文件夹的测试；从头开始上传一个简单的 html 页面，无需 PHP；在没有 SSL 的情况下使用...我认为已经测试了所有内容，但在 iOS Safari、Mac OS Safari 甚至在 MacOS 中的 Chrome 中显示了元素，但方式不正确。

【问题讨论】：

标签： html css ios macos safari

【解决方案1】：

您应该设置标题标题的行高。

#MainTitles h1 { line-height: 50px } 

#LangSelect a { line-height: 20px; }

但问题不在这两条规则之内。我没有确定完整的 CSS 代码，我只是检查了一些我看到损坏的地方的小修复

【讨论】：

嗨，我已经将这两行添加到我的 CSS 文件中，现在在 iPhone 中显示 H1，但没有 #LangSelect（语言菜单）和 H1 下方的
。另一件奇怪的事，在 iPhone 中我点击 H1 它消失了！
替换这一行：#LangSelect a { line-height: 20px;使用这个：#LangSelect a { line-height: 36px;显示：块；高度：25px； }
哇！有用！但是 H1 下面的
我做了同样的，仍然没有显示
替换：#MainTitles h1 { 边距：30px auto; } with: #MainTitles h1 { margin: 30px auto 0 auto; } 和 #MainTitles p { line-height: 20px;显示：块；高度：30px； } 与：#MainTitles p { line-height: 30px;显示：块； }

【解决方案2】：

我发现了问题并解决了问题。 OS X 的某些字体存在渲染问题。我开始研究寻找一个共同的模式，我在 3 个网站上遇到了这个问题：

无法正常调整行高。
将 ul 从 inline-block 更改为 flexbox，不起作用
Mac OS 中的任何浏览器都存在此问题（我测试 Chrome， Firefox 和 Safari）

继续研究，我发现了一些关于该问题的文档。我找到了这个article OS X 类型渲染 - 文本基线向上移动，实际上不再在 line-height 内垂直居中我在 3 个不同的网站上测试都有这个问题，瞧！现在一切正常。我在 3 个网站中使用了相同的字体（通用模式）：

哥谭书
黑哥谭

我可以确认这两种字体会引起 Mac Os 中的渲染问题。现在问题已经解决了。

【讨论】：