当前位置： 文江博客话题详情

UCO（身份不明的 CSS 对象）在 Firefox 中向我的文本区域添加更大的字体

发布于 2024-08-20 07:20:00 字数 9587 浏览 5 评论 0原文

我正在构建一个包含 3 个字段的表单：#name、#mail 和 #message。第一个和第二个字段具有相同的字体大小，但最后一个字段 (#message) 仅在 Firefox 上具有更大的字体大小。

这是我用 Firebug 检查 #message 时的 CSS：

 ....loading....

body {
color:#666666;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:14px;
line-height:130%;
margin:0;
padding:0;
}
screen.css (line 3)
#message {
height:100px;
width:200px;
}
global.css (line 189)
#name, #email, #message {
font-family:Arial,"MS Trebuchet",sans-serif;
margin:0 0 10px;
padding:6px;
}
global.css (line 182)
Inherited fromdiv#form
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited fromdiv#contact
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited fromdiv.container
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited fromdiv#footer
#footer {
color:#DDDDDD;
}
global.css (line 145)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited frombody#home
body {
color:#666666;
font-family:Arial,"MS Trebuchet",sans-serif;
font-size:75%;
}
global.css (line 27)
body {
line-height:1;
}
global.css (line 12)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited fromhtml
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)

我的 Firefox chrome 文件夹 (userContent.css) 中有这个：

input, select, button,textearea {
 font-family: Arial !important; 
}

pre, code {
 font-family: Consolas !important; 
}

这是 CSS当我用 Firebug 检查它时的 #name：

 ....loading....

body {
color:#666666;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:14px;
line-height:130%;
margin:0;
padding:0;
}
screen.css (line 3)
#name, #email, #message {
font-family:Arial,"MS Trebuchet",sans-serif;
margin:0 0 10px;
padding:6px;
}
global.css (line 182)
input, select, button, textearea {
}
userContent.css (line 1)
Inherited fromdiv#form
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited fromdiv#contact
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited fromdiv.container
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited fromdiv#footer
#footer {
color:#DDDDDD;
}
global.css (line 145)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited frombody#home
body {
color:#666666;
font-family:Arial,"MS Trebuchet",sans-serif;
font-size:75%;
}
global.css (line 27)
body {
line-height:1;
}
global.css (line 12)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited fromhtml
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)

这是当我用 Firebug 检查它时 #mail 的 CSS：

....loading....

body {
color:#666666;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:14px;
line-height:130%;
margin:0;
padding:0;
}
screen.css (line 3)
#name, #email, #message {
font-family:Arial,"MS Trebuchet",sans-serif;
margin:0 0 10px;
padding:6px;
}
global.css (line 182)
input, select, button, textearea {
}
userContent.css (line 1)
Inherited fromdiv#form
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited fromdiv#contact
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited fromdiv.container
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited fromdiv#footer
#footer {
color:#DDDDDD;
}
global.css (line 145)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited frombody#home
body {
color:#666666;
font-family:Arial,"MS Trebuchet",sans-serif;
font-size:75%;
}
global.css (line 27)
body {
line-height:1;
}
global.css (line 12)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited fromhtml
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
原文

I'm building a form with 3 fields: #name, #mail, and #message. The first and second field have the same font size but the last one (#message) have a bigger font size only on Firefox.

Here is the CSS of #message when I inspect it with Firebug:

 ....loading....

body {
color:#666666;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:14px;
line-height:130%;
margin:0;
padding:0;
}
screen.css (line 3)
#message {
height:100px;
width:200px;
}
global.css (line 189)
#name, #email, #message {
font-family:Arial,"MS Trebuchet",sans-serif;
margin:0 0 10px;
padding:6px;
}
global.css (line 182)
Inherited fromdiv#form
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited fromdiv#contact
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited fromdiv.container
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited fromdiv#footer
#footer {
color:#DDDDDD;
}
global.css (line 145)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited frombody#home
body {
color:#666666;
font-family:Arial,"MS Trebuchet",sans-serif;
font-size:75%;
}
global.css (line 27)
body {
line-height:1;
}
global.css (line 12)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited fromhtml
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)

And I have this in my Firefox chrome folder (userContent.css):

input, select, button,textearea {
 font-family: Arial !important; 
}

pre, code {
 font-family: Consolas !important; 
}

Here is the CSS of #name when I inspect it with Firebug:

 ....loading....

body {
color:#666666;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:14px;
line-height:130%;
margin:0;
padding:0;
}
screen.css (line 3)
#name, #email, #message {
font-family:Arial,"MS Trebuchet",sans-serif;
margin:0 0 10px;
padding:6px;
}
global.css (line 182)
input, select, button, textearea {
}
userContent.css (line 1)
Inherited fromdiv#form
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited fromdiv#contact
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited fromdiv.container
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited fromdiv#footer
#footer {
color:#DDDDDD;
}
global.css (line 145)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited frombody#home
body {
color:#666666;
font-family:Arial,"MS Trebuchet",sans-serif;
font-size:75%;
}
global.css (line 27)
body {
line-height:1;
}
global.css (line 12)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited fromhtml
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)

Here is the CSS of #mail when I inspect it with Firebug:

....loading....

body {
color:#666666;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:14px;
line-height:130%;
margin:0;
padding:0;
}
screen.css (line 3)
#name, #email, #message {
font-family:Arial,"MS Trebuchet",sans-serif;
margin:0 0 10px;
padding:6px;
}
global.css (line 182)
input, select, button, textearea {
}
userContent.css (line 1)
Inherited fromdiv#form
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited fromdiv#contact
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited fromdiv.container
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited fromdiv#footer
#footer {
color:#DDDDDD;
}
global.css (line 145)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited frombody#home
body {
color:#666666;
font-family:Arial,"MS Trebuchet",sans-serif;
font-size:75%;
}
global.css (line 27)
body {
line-height:1;
}
global.css (line 12)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited fromhtml
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

动次打次papapa 2024-08-27 07:20:00

您可以对字体大小定义做的最好的事情之一是使用 em 单位大小而不是 px 大小。

尽管如此，这个 CSS 并不能说明什么，因为缺少其他两种样式（#name、#mail）。您可以轻松地将它们与其他两个进行比较，看看有什么不同。

One of the best things that you could do with your font-size definitions is to use em unit sizes instead of the px sizes.

Still, not much can be told by this CSS, since the other two styles are missing (#name, #mail). With those other two you can easilly compare them and see what is different.

回复 原文
~没有更多了~

关于作者

小伙你站住

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

内心激荡

文章 0 评论 0

JSmiles

文章 0 评论 0

赏烟花じ飞满天

文章 0 评论 0

左秋

文章 0 评论 0

迪街小绵羊

文章 0 评论 0

瞳孔里扚悲伤

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文