Flink 拒绝呈现所有css后的进展：：-moz-progress-bar{}？

zkure5ic 于 2024-01-09 发布在 Flink

关注(0)|答案(1)|浏览(197)

我正在设计一个HTML [progress]元素的样式。我正在嵌套我的css规则。

body {
  font-family: sans-serif;
  font-size: 16px;
}

form {
    
    progress::-webkit-progress-value { background-color: orange; }
    
    progress::-moz-progress-bar { background-color: orange; }

    input {
      border: 1px solid gray;
      min-height: 35px;
    }

    ... more css rules ...
} /* form */

字符串
这在Firefox中运行良好，但Chrome和Edge在progress::-moz-progress-bar {}之后停止渲染所有css规则，导致布局损坏。
最后我把progress::-moz-progress-bar {}放在了样式表的最后，这是可行的，但如果不这样做的话肯定会很好。有人知道修复方法吗？

css

来源：https://stackoverflow.com/questions/77743052/blink-refuse-to-render-all-css-after-progress-moz-progress-bar

1条答案

按热度按时间

uemypmqf1#

显然，这个问题只发生在嵌套CSS规则时。
这适用于跨浏览器：

body,
html
{
  font-size: 16px;
  font-family: sans-serif;
  height: 100%;
}

body *
{ box-sizing: border-box; }

form {
    --bg: rgb(245,245,245);
    --text: rgb(60,60,60);
    --border: silver;
    --accent: lime;
    --min: 2.5rem;
    --pad: .5rem;
}

/*********************/
/**** Backgrounds ****/
/*********************/

button,
input,
progress,
progress::-webkit-progress-bar
{ background-color: var(--bg); }

progress::-webkit-progress-value 
{ background-color: var(--accent); }

progress::-moz-progress-bar 
{ background-color: var(--accent); }

/*********************/
/****** Borders ******/
/*********************/

button,
fieldset,
input,
progress
{ border: 1px solid var(--border); }

button,
fieldset,
input,
progress
{ border-radius: .5rem; }

/******************************/
/*********** Accent ***********/
/******************************/
input,
progress
{ accent-color: var(--accent); }

/******************************/
/************ Text ************/
/** Color/Size/Weight/Shadow **/
/******************************/

button,
input,
fieldset,
label,
legend
{
  color: var(--text);
  font-size: 1rem;
}

button,
input[type="reset"],
input[type="submit"],
label,
legend
{ font-weight:bold; }

/*********************/
/***** Structure *****/
/*********************/

button
{
  min-height: var(--min);
  padding: var(--pad);
}

button,
input[type="reset"],
input[type="submit"]
{
  margin: .25rem;
  overflow-wrap: anywhere;
}

div {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  justify-content: center;
  margin: 1rem 0;
}

div > *
{ margin: 0; }

fieldset
{ padding: var(--pad); }

fieldset > div
{ margin: 0; }

input
{
  min-height: var(--min);
  padding: var(--pad);
}

label
{ white-space: nowrap; }

progress
{
  appearance: none;
  height: 1.5rem;
  overflow: clip;
  width: 100%;
}

.column
{ flex-direction: column; }

.column.reverse
{ flex-direction: column-reverse; }

.row
{
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
}

.row > *
{
  flex: 1;
  margin: 0;
}

.row > input:not([type="radio"]):not([type="checkbox"])
{ flex: 2 }

.row.reverse
{ flex-direction: row-reverse; }

个字符
这会破坏Chromium/Blink

body,
html
{
  font-size: 16px;
  font-family: sans-serif;
  height: 100%;
}

body *
{ box-sizing: border-box; }

form {
    --bg: rgb(245,245,245);
    --text: rgb(60,60,60);
    --border: silver;
    --accent: lime;
    --min: 2.5rem;
    --pad: .5rem;

    /*********************/
    /**** Backgrounds ****/
    /*********************/

    button,
    input,
    progress,
    progress::-webkit-progress-bar
    { background-color: var(--bg); }

    progress::-webkit-progress-value 
    { background-color: var(--accent); }

    progress::-moz-progress-bar 
    { background-color: var(--accent); }

    /*********************/
    /****** Borders ******/
    /*********************/

    button,
    fieldset,
    input,
    progress
    { border: 1px solid var(--border); }

    button,
    fieldset,
    input,
    progress
    { border-radius: .5rem; }

    /******************************/
    /*********** Accent ***********/
    /******************************/
    input,
    progress
    { accent-color: var(--accent); }

    /******************************/
    /************ Text ************/
    /** Color/Size/Weight/Shadow **/
    /******************************/

    button,
    input,
    fieldset,
    label,
    legend
    {
      color: var(--text);
      font-size: 1rem;
    }

    button,
    input[type="reset"],
    input[type="submit"],
    label,
    legend
    { font-weight:bold; }

    /*********************/
    /***** Structure *****/
    /*********************/

    button
    {
      min-height: var(--min);
      padding: var(--pad);
    }

    button,
    input[type="reset"],
    input[type="submit"]
    {
      margin: .25rem;
      overflow-wrap: anywhere;
    }

    div {
      display: flex;
      flex-direction: column;
      gap: .5rem;
      justify-content: center;
      margin: 1rem 0;
    }

    div > *
    { margin: 0; }

    fieldset
    { padding: var(--pad); }

    fieldset > div
    { margin: 0; }

    input
    {
      min-height: var(--min);
      padding: var(--pad);
    }

    label
    { white-space: nowrap; }

    progress
    {
      appearance: none;
      height: 1.5rem;
      overflow: clip;
      width: 100%;
    }

    .column
    { flex-direction: column; }

    .column.reverse
    { flex-direction: column-reverse; }

    .row
    {
      align-items: center;
      flex-direction: row;
      flex-wrap: wrap;
    }

    .row > *
    {
      flex: 1;
      margin: 0;
    }

    .row > input:not([type="radio"]):not([type="checkbox"])
    { flex: 2 }

    .row.reverse
    { flex-direction: row-reverse; }
    
} /* form */

<form action="/foo/">
  <div class="row">
        <div>
      <label for="givenname">Given Name</label>
      <input id="givenname" name="givenname">
    </div>
    <div>
      <label for="familyname">Family Name</label>
      <input id="familyname" name="familyname">
    </div>
  </div>

  <fieldset>
    <legend>progress</legend>
    <progress value="50" max="100" id="progress"></progress>
  </fieldset>
  
  <input type="submit" value="Submit">
    <input type="reset">
</form>

的字符串
但是，如果你把progress::-moz-progress-bar {}放在样式表的末尾，它仍然可以工作。

赞(0）回复(0）举报 2024-01-09

我来回答

Flink 拒绝呈现所有css后的进展：：-moz-progress-bar{}？

1条答案

相关问题

热门标签

最新问答