我已将其缩小为以下 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'>
<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
的按钮的字体系列和字体大小,但输入使用 class text1
很好,而且只在 Chrome 中(我只测试过 Chrome 和 Firefox)。
将类更改为 ID 似乎并不重要,反之亦然;它总是失去其字体特征的按钮。此外,在 background: pink;
出现在 block 中的位置似乎没有什么区别;只要它在那里,字体似乎就符合预期。
最佳答案
根据您给定的样式,它工作正常。 font-size: 42
不会应用任何内容,因为它不是有效语法。它应该像 font-size:42px
在 #btn2
中一样。之后,如果您删除/添加背景,则不会更改任何样式。看下面的代码片段(我没有应用font-size:42px
,而是按照你的代码运行)。
#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;
}
<input type='button' id='btn1' onclick='alert("btn1")' value='Button1'>
<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
。请看下面的代码片段。
#btn1, .text1 {
font-family: courier;
font-size: 42;
}
#btn2, .text2 {
font-family: arial;
font-size: 42px;
background: cyan;
}
<input type='button' id='btn1' onclick='alert("btn1")' value='Button1'>
<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'>
看看上面的片段。两个片段 button1 字体系列之间没有区别。这两个地方都只应用了 courier
字体。只有背景变得不同,因为它正在为按钮应用默认样式。
现在让我们知道,您还有什么具体问题吗???
关于css - 删除 CSS 声明会破坏 block 中的其他声明,但仅适用于 Chrome 中的按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49312797/