时间戳

首页 > 解决方案 > 跨浏览器错误（我尝试了 CSS 重置）

html - 跨浏览器错误（我尝试了 CSS 重置）

问题描述

我在跨浏览器时遇到严重问题，我不知道为什么。我正在使用一个主题，通常没有这样的问题，我尝试过使用 CSS 重置。这个问题可以在这张图片https://imgur.com/a/B8pc5qP上看到。如果我有两个盒子，它们在 Safari 和 Chrome 中看起来完全不同，这使得它无法设置样式，因为 Chrome 版本下总是有更多的空白。

这个问题与标题有关。在 Safari 中，所有标题下方的填充/下方空间要少得多。

标签： htmlcsswordpress

解决方案

所以看起来你正在使用 good old clearfix。clearfix预计会有floated 孩子。添加float:left;到最后一个元素是clearfix预期的。我做了以下操作，这些框在 Chrome 和 Safari 中看起来很相似。

<div class="column_attr clearfix" style="background-color:#ffffff;box-shadow: 3px 3px 10px rgba(0,0,0,0.15);">
    <h3>Bonzo</h3>
    <h3></h3>
    <h6 style="float: left;">A better food experience.</h6>
</div>
  1. 我建议通过 CSS 执行此操作，我只是通过 HTML 执行此示例。
.clearfix h6 {
    float: left;
}

推荐阅读