我正在构建一个包含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;
}
当我使用Firebug进行检查时,这是#name的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)
当我用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)
答案 0 :(得分:0)
使用字体大小定义可以做的最好的事情之一是使用em单位大小而不是px大小。
然而,这个CSS没有多少可以告诉,因为缺少其他两种风格(#name,#mail)。有了这两个,你可以轻松地比较它们,看看有什么不同。