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

问题描述 投票：0回答：1

我正在用 nwjs 构建一个应用程序。我有一个div，显示一些格式化的信息，我想当我点击它时，执行一个动作。然后，我想添加Tab的功能，并按空格或回车键来选择它。当我在查找如何做到这一点时，我发现我所做的方法是错误的，最好是使用 <input type='button'> 或 <button type='button'> 而不是因为它能让代码更易读，让可访问性功能更好地发挥作用，并且已经内置了我想要的键盘行为。

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

将 <div>与 <button type='button'> 还需要两个额外的css规则来维护同样的外观。border: transparent; 和 width: 100%;. 然而，由于某些奇怪的原因，它打破了我之前使用CSS grid的水平排列，恢复到默认的垂直堆叠，就像我没有使用 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>

而用div的代码是 <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>
html css css-grid nwjs
1个回答
0
投票

显然，因为 <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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.