display:grid 在 chromium 和 nwjs 的按钮元素上不工作，在 firefox 中工作正常

Question

我正在使用 nwjs 构建应用程序。我有一个 div 显示一些格式化的信息，我想在我点击它时执行一个动作。然后，我想为其添加制表符并点击 space 或输入 select 的功能。当我在寻找如何做到这一点时，我发现我正在做的方法是错误的，最好使用 <input type='button'> 或 <button type='button'> 来代替，因为它使代码更具可读性，使可访问性功能更好用，并且已经有了我想要的内置键盘行为。

在这两个中，我发现据说 <input type='button'> 是一个空元素，这意味着它本身不能包含更多元素（从我的测试来看这似乎是正确的），而 <button type='button'>可以包含元素。因为我用它来替换包含更多嵌套元素的 div，所以我选择了 <button type='button'>。 type='button' 在那里是因为我没有表格并且不想尝试任何提交。 event.preventdefault() 应该阻止提交，但我宁愿以正确的方式进行。

用 <button type='button'> 切换 <div> 还需要两个额外的 css 规则来保持相同的外观：border: transparent; 和 width: 100%;。然而，出于某种奇怪的原因，它打破了我之前使用 CSS 网格的水平排列，恢复到默认的垂直堆叠，就好像我没有 display:grid 一样。我不明白为什么会这样。有人告诉我尝试 inline-grid，但那也不起作用。我在 chromium 浏览器中打开布局，并确认带有 divs 的那个也在那里工作，而带有按钮的那个也在那里坏了。但是，布局在 Firefox 中 100% 符合预期。

下面是基于我的应用程序中存在的代码的简化代码，它仍然显示问题。使用 divs 的工作代码是：

<!DOCTYPE html>
<html>

<head>
    <title>working, with divs</title>
    <style>
        .outer {
            display: grid;
            grid-template-columns: 10em auto 10em;
            background-color: lightgray;
            padding: 1em 0;
            border-radius: 1em;
            margin-bottom: 0.25em;
        }

        .inner {
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class='outer'>
        <div class='inner'>
            aaa
        </div>
        <div class='inner'>
            bbb
        </div>
        <div class='inner'>
            ccc
        </div>
    </div>
    <div class='outer'>
        <div class='inner'>
            aaa
        </div>
        <div class='inner'>
            bbb
        </div>
        <div class='inner'>
            ccc
        </div>
    </div>
    <div class='outer'>
        <div class='inner'>
            aaa
        </div>
        <div class='inner'>
            bbb
        </div>
        <div class='inner'>
            ccc
        </div>
    </div>
</body>

</html>

并且使用 <button type='button'> 的代码在 firefox 中有效但在 Chromium 或 nwjs 中无效是：

<!DOCTYPE html>
<html>

<head>
    <title>broken, with buttons</title>
    <style>
        .outer {
            display: grid;
            grid-template-columns: 10em auto 10em;
            background-color: lightgray;
            padding: 1em 0;
            border-radius: 1em;
            margin-bottom: 0.25em;
            border: transparent;
            width: 100%;
        }

        .inner {
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <button type='button' class='outer'>
        <div class='inner'>
            aaa
        </div>
        <div class='inner'>
            bbb
        </div>
        <div class='inner'>
            ccc
        </div>
    </button>
    <button type='button' class='outer'>
        <div class='inner'>
            aaa
        </div>
        <div class='inner'>
            bbb
        </div>
        <div class='inner'>
            ccc
        </div>
    </button>
    <button type='button' class='outer'>
        <div class='inner'>
            aaa
        </div>
        <div class='inner'>
            bbb
        </div>
        <div class='inner'>
            ccc
        </div>
    </button>
</body>

</html>

Answer 1

显然，因为 <button> 标签不能用纯 CSS 实现，只有一些 CSS 规则在某些浏览器上对它们起作用，大多数 display: 设置都在CSS 规则不起作用。 Chromium 是其中一个无法运行的浏览器，直到 Chromium 83 在撰写本文时不到一个月前发布，而 Firefox 则不是。事实上，现在我已经重新启动了我的 Chromium，我损坏的布局现在可以正常工作了。但是，当我开始对此进行故障排除时，nwjs 似乎没有更新到 chromium 83。然而，从本周早些时候开始，它也应该在 nwjs 上得到修复。

在发现 chromium 和 nwjs 不再需要所述解决方法之前，我实际上使用解决方法修复了我的代码，我只需要更新。以防万一您需要支持比 83 更旧的 Chromium 版本，解决方法是在应用网格布局的按钮内添加一个 span 标签。代码：

<!DOCTYPE html>
<html>

<head>
    <title>problem fixed</title>
    <style>
        .outer-btn {
            background-color: lightgray;
            padding: 1em 0;
            border-radius: 1em;
            margin-bottom: 0.25em;
            border: transparent;
            width: 100%;
            border: 0;
        }

        .outer-layout {
            display: grid;
            grid-template-columns: 10em auto 10em;
            width: 100%;
            margin: 0;
            border: 0;
            padding: 0;
        }

        .inner {
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <button type='button' class='outer-btn'>
        <span class='outer-layout'>
            <div class='inner'>
                aaa
            </div>
            <div class='inner'>
                bbb
            </div>
            <div class='inner'>
                ccc
            </div>
        </span>
    </button>
    <button type='button' class='outer-btn'>
        <span class='outer-layout'>
            <div class='inner'>
                aaa
            </div>
            <div class='inner'>
                bbb
            </div>
            <div class='inner'>
                ccc
            </div>
        </span>
    </button>
    <button type='button' class='outer-btn'>
        <span class='outer-layout'>
            <div class='inner'>
                aaa
            </div>
            <div class='inner'>
                bbb
            </div>
            <div class='inner'>
                ccc
            </div>
        </span>
    </button>
</body>

</html>

display:grid 在 chromium 和 nwjs 的按钮元素上不工作，在 firefox 中工作正常

display:grid not working on a button element in chromium and nwjs, works fine in firefox

html

css

css-grid

nwjs