CSS Grid Firefox vs Chrome difference with grid-template-columns [duplicate]

问题

The following snippet was designed for use in Firefox (79.0a1 from 2020-06-24), where the CSS grid is behaving as I expected (label and input on the same row, submit spanning the width of the fieldset). In Chrome (83.0.4103.116), the label and input go on different rows and the submit button is as narrow as its value allows.

<!DOCTYPE html>
<html lang="en">

<head>
  <style type="text/css">
    input[type="submit"] {
      display: block;
      grid-column-start: 1;
      grid-column-end: 3;
    }
    
    label {
      display: block;
      text-align: right;
    }
    
    fieldset {
      display: grid;
      grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr);
    }
  </style>
</head>

<body>
  <form action="/login" method="post">
    <fieldset>
      <label for="email">Email address</label>
      <input type="email" name="email">
      <input type="submit" value="Sign in">
    </fieldset>
  </form>
</body>

</html>

Is this a browser bug or am I doing something silly?

回答1:

The grid value for display doesn't seem to work on certain elements such as <fieldset> and is listed as an issue here:

Stackoverflow, "Grid layout on fieldset bug on Chrome"
Chromium, "Issue 375693: [css-flex][css-grid] Flexbox/grid layout model does not work on fieldset elements"

As mentioned in the related thread on Stackoverflow, using display: contents on the fieldset instead might be a workaround:

input[type="submit"] {
  display: block;
  grid-column-start: 1;
  grid-column-end: 3;
}
    
label {
  display: block;
  text-align: right;
}
    
form {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr);
}
    
fieldset {
  display: contents;
}

  <form action="/login" method="post">
    <fieldset>
      <label for="email">Email address</label>
      <input type="email" name="email">
      <input type="submit" value="Sign in">
    </fieldset>
  </form>

I'd note that MDN mentions there might be some issues with accessibility, as the <fieldset> — but not its descendants — will supposedly be invisible to screen reading technology. I haven't been able to test this with Orca, NVDA and other similar screen reading software yet.

来源：https://stackoverflow.com/questions/62572551/css-grid-firefox-vs-chrome-difference-with-grid-template-columns

标签

css

google-chrome

css-grid