我已将其范围缩小到以下 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 按钮的 font-family 和 font-size btn1
,但是 class 的输入text1
很好,并且只在 Chrome 中(我只测试了 Chrome 和 Firefox)。
如果我将类更改为 ID,反之亦然,这似乎无关紧要;它总是失去其字体特征的按钮。此外,background: pink;
在块中出现的位置似乎没有区别;只要它在那里,字体似乎就如预期的那样。
根据您给出的样式,它工作正常。font-size: 42
这不会应用任何东西,因为它不是有效的语法。它应该像font-size:42px
它的 in 一样#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
字体的两个地方。只有背景变得不同,因为它应用了按钮的默认样式。
现在让我们知道,您还有什么具体问题???
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句