Question

我已将其缩小为以下HTML，这会在Chrome中产生奇怪的效果：

   <style type="text/css">
      #btn1, .text1 {
        font-family: courier;
        font-size:   42px;
        background:  pink;  /* BUG?? Removing this line breaks btn1's font */
      }
      #btn2, .text2 {
        font-family: arial;
        font-size:   42px;
        background:  cyan;
      }
    </style>
 
    <input type='button' id='btn1' onclick='alert("btn1")' value='Button1'> &nbsp;
    <input type='button' id='btn2' onclick='alert("btn2")' value='Button2'> <p>
    <input type='text' class='text1' value='Text1'> <p>
    <input type='text' class='text2' value='Text2'>

当删除包含background: pink;的声明行时，它会破坏ID为btn1的按钮的font-family和font-size，但类text1的输入很好，仅限Chrome（我只测试过Chrome和Firefox）。

如果我将类更改为ID，反之亦然，这似乎并不重要;它总是失去其字体特征的按钮。此外，在background: pink;出现在块内的情况下似乎没有区别;只要它在那里，字体似乎是预期的。

Answer 1

根据您给出的样式，它工作正常。 font-size: 42不会应用任何内容，因为它不是有效的语法。它应该像font-size:42px中的#btn2一样。之后，如果您删除/添加背景，那就不会改变任何样式。请查看以下代码段（我没有应用font-size:42px，并按照您的代码运行。）

＆＃13;

#btn1, .text1 {
        font-family: courier;
        font-size:   42;
        background:  pink;  /* BUG?? Removing this line breaks btn1's font */
      }
      #btn2, .text2 {
        font-family: arial;
        font-size:   42px;
        background:  cyan;
      }

＆＃13;

<input type='button' id='btn1' onclick='alert("btn1")' value='Button1'> &nbsp;
    <input type='button' id='btn2' onclick='alert("btn2")' value='Button2'> <p>
    <input type='text' class='text1' value='Text1'> <p>
    <input type='text' class='text2' value='Text2'>

＆＃13;

现在我将从您的代码中删除background: pink。请看下面的代码段。

＆＃13;

#btn1, .text1 {
        font-family: courier;
        font-size:   42;        
      }
      #btn2, .text2 {
        font-family: arial;
        font-size:   42px;
        background:  cyan;
      }

＆＃13;

<input type='button' id='btn1' onclick='alert("btn1")' value='Button1'> &nbsp;
    <input type='button' id='btn2' onclick='alert("btn2")' value='Button2'> <p>
    <input type='text' class='text1' value='Text1'> <p>
    <input type='text' class='text2' value='Text2'>

＆＃13;

看看上面的代码片段。两个片段button1字体系列没有区别。这两个地方仅应用courier字体。只有背景变得不同，因为它正在应用按钮的默认样式。

现在让我们知道，你还有什么具体问题吗？

删除CSS声明会破坏块中的其他声明，但仅限于Chrome中的按钮

1 个答案: