html - 基于 webkit 的浏览器明显缺乏对 Tailwind CSS 2+ 的支持

Question

我正在开发一个专门使用 Tailwind 作为前端的 Web 应用程序，并且我为其构建了一个简单的侧边栏，如下所示:

<!--SIDEBAR Element (Tailwind)-->
<div
  class="flex flex-col w-full py-8 m-auto text-gray-300 shadow-md justify-around bg-palegray space-y-12 rounded-xl"
>
  <!--PENCIL BUTTON-->
  <button
    class="px-3 mx-auto w-full space-y-4 border-solid border-gray-400 border-r-4"
    id="pencil-button"
  >
    <div class="flex justify-around" id="icon">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-8"  viewBox="0 0 20 20" fill="currentColor">
            <path
               d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
        </svg>
    </div>
    <p class="text-xs">Draw</p>
  </button>

  <!--SQUARE BUTTON-->
  <button class="px-3 mx-auto ...">
    <!--Basically the same markup as the button above-->
  </button>

  <!--CIRCLE BUTTON-->
  <button class="px-3 mx-auto ...">
    <!--Basically the same markup as the button above-->
  </button>

  <!--SPRAY BUTTON-->
  <button class="px-3 mx-auto ...">
    <!--Basically the same markup as the button above-->
  </button>

  <!--PATTERN BUTTON-->
  <button class="px-3 mx-auto ...">
    <!--Basically the same markup as the button above-->
  </button>

  <!--TEXTURE BUTTON-->
  <button class="px-3 mx-auto ...">
    <!--Basically the same markup as the button above-->
  </button>
</div>

不幸的是，虽然它可以在 Firefox 和基于 Chromium 的浏览器上运行，但它在所有 webkit 浏览器(例如 Epiphany 和 safari)上完全崩溃。这就是它的样子:

问题显然是 space-y-4 类，它使用 css 变量，可能无法在基于 webkit 的浏览器上工作。然而，删除这个类并没有解决问题。此外，我重新运行 tailwind 来生成 webkit 的供应商前缀，但这并没有帮助解决问题。

Answer 1

本质上，我有两个错误:

• 非语义 HTML
• 内嵌 SVG 图标没有高度属性

许多浏览器，包括所有基于 webkit 的浏览器(如 Safari)，不支持使用 <button>标记为 Flexbox 容器。最新版本的 Firefox 和 Chrome 支持这一点，但不幸的是许多其他浏览器不支持这一点，而是忽略其中放置的所有 Flex 类(例如 justify-center 、 space-y- 、 space-x- )。

这是我的代码存在的问题:

  <button class="flex px-3 mx-auto w-full space-y-4" id="pencil-button">
    <div class="flex justify-around" id="icon">
        <svg></svg>
    </div>
    <p class="text-xs">Draw</p>
  </button>

注意有一个 div按钮内部。我们已将 Flexbox 应用于按钮，并添加了 space-y-4类给它。这不被视为有效的 HTML，因此在页面上呈现时会被忽略。

相反，让我们剪切应用到按钮的每个类，并将按钮中的所有这些类移动到 <span>

  <button id="pencil-button">
+   <span class="flex px-3 mx-auto w-full space-y-4">
      <span class="flex justify-around" id="icon">
          <svg></svg>
      </span>
      <p class="text-xs">Draw</p>
+   </span>
  </button>

现在这应该可以了!请注意我们如何替换每个 <div>带有 <span> 的标签标签，以便我们通过验证。

备份解决方案

这可能并不总是有效，您仍然会看到错误。这是因为 webkit 浏览器并不总是按比例缩放 SVG 图标。如果您只指定宽度，而不是同时指定宽度和高度，浏览器将自动为图标指定高度，但在大多数情况下，这是错误的。

  <svg class="w-8" viewBox="0 0 20 20" fill="currentColor">
  </svg>

在这里，我的错误在于仅指定了宽度。要解决此问题，我们需要添加宽度和高度:

  <svg class="w-8 h-full" viewBox="0 0 20 20" fill="currentColor">
  </svg>

这应该可以解决这个问题。

• 引用文献:https://github.com/tailwindlabs/tailwindcss/issues/2476