Firebug声称未经样式处理的文本框是border: 3px inset #F0F0F0;
然而,<input type="textbox" style="border: 3px inset #F0F0F0;" />
和<input type="textbox" />
产生非常不同的边框外观。这是怎么回事?
在Safari、Chrome和Firefox中都是如此——我没有IE,所以不知道情况如何。
Firebug声称未经样式处理的文本框是border: 3px inset #F0F0F0;
然而,<input type="textbox" style="border: 3px inset #F0F0F0;" />
和<input type="textbox" />
产生非常不同的边框外观。这是怎么回事?
在Safari、Chrome和Firefox中都是如此——我没有IE,所以不知道情况如何。
appearance
/-moz-appearance
/-webkit-appearance
属性设置为除none
以外的其他值,就像在浏览器的默认样式表中为<input type="text">
设置的那样,那么元素的常规CSS边框/背景将被舍弃,而采用特定于平台的主题,这可能看起来不同于纯粹的CSS提供的平面3D对象,在具有主题的平台上。<div style="-moz-appearance: textfield">x</div>
<input style="-moz-appearance: none" value="x"/>
background
或 border
样式,它的 -moz-appearance
就会被忽略并替换为 none
,导致出现您在示例中看到的平面3D边框样式,这就是没有主题时输入框的外观。background: default; border: default
可以避免触发此行为。appearance
样式。另外,使用 XP/2000 的“经典”主题的用户看不到差异,因为 IE 以一种与“经典”Windows样式相匹配的方式呈现 CSS inset
/outset
边框样式。)