Niquelao » 博客档案 » Tamaños de fuente y herencia en controles de Formulario
» 博客档案 » 表单控件中的字体大小与继承 Niquelao - CSS 表单控件中的字体大小与继承 2006年5月30日 作者:Maroto 现在说点正经的。理论上,字体大小应该从父元素继承。但偶然间(不知道是谁说的),我们发现替换元素(基本上就是表单控件,如 input)有时并不遵循这个行为。 Aquí estamos para daros la solución。我们在这里提供解决方案。通过进行一系列测试,以确定不同浏览器之间的行为模式,并提供一个兼容所有浏览器的解决方案。最终的解决方案。使用的浏览器列表: Internet Explorer 5.5 Internet Explorer 6 Internet Explorer 7 Mozilla Firefox 1.5.0.3 (W) Opera 8.54 (W) Mozilla Firefox 1.5.0.3 (L) Opera 9 (L) Konqueror 3.5.2 Galeon 2.0.1 测试方法是对以下代码中的元素应用不同的字体属性更改:
Lorem ipsum dolor sat amet,consectetuer adipiscing elit。Curabitur commodo。 Phasellus quis dui ut est scelerisque tempus。 Sed faucibus nisl consequat dolor。Vestibulum ornare laoreet nunc。 Nunc euismod nulla et libero。In dictum。 Sed Fringilla。 Ut nisi neque、porttitor vitae、pretium vel、sodales a、massa。Vestibulum orci。 Quisque pellentesque,leo vel posuere luctus,ante nisl lobortis mauris,in tempus pede nibh at nibh。 Etiam vehicula varius felis。 Sed dapibus risus nec ante。In ultricies。 Ut lacinia felis ac eros。 Integer ultricies libero at velit。Vestibulum adipiscing venenatis purus。 Mauris consequat,libero eget lacinia aliquam,risus nibh gravida ante,eu consequat neque nibh ut lorem。 Nam quam。
以下是各项测试的链接。 链接右侧指明了每种情况下修改的属性。 Ejemplo 1(无样式) Ejemplo 2(正文:字体大小) Ejemplo 3(正文:字体系列) Ejemplo 4(正文:字体) Ejemplo 5(正文,输入:字体系列) Ejemplo 6(正文:字体系列/输入:字体大小) Ejemplo 7(正文:字体系列/输入:字体) Ejemplo 8(正文:字体大小/输入:字体系列) Ejemplo 9(正文,输入:字体大小) Ejemplo 10(正文:字体大小/输入:字体) Ejemplo 11(正文,输入:字体) Ejemplo 12(输入:字体系列) Ejemplo 13(输入:字体大小) Ejemplo 14(输入:字体) Ejemplo 15(正文:字体/输入:字体系列) Ejemplo 16 (正文:字体/输入:字体大小) Ejemplo 17(正文,输入:字体系列继承) Ejemplo 18(正文:字体系列继承/输入:字体大小继承) Ejemplo 19(正文,输入:字体大小继承) Ejemplo 20(正文:字体大小继承/输入:字体系列继承) Ejemplo 21(正文:字体/输入:字体系列继承) Ejemplo 22(正文:字体/输入:字体系列继承)字体/输入:字体大小继承) Ejemplo 23(输入:字体继承) Ejemplo 24(输入:字体大小字体系列继承) Ejemplo 25(正文,输入:继承) 我们观察到 Firefox 和 Galeón 之间的行为相似,Konqueror 和 IE 之间也相似,而 Opera 则有一些变体。 我们可以得出结论(准确率很高),只需为 input 定义一个相对字体大小(例如 1em)就足够了。如果在 body 中定义了字体大小 (font-size),表单控件的大小将相应调整;如果在 body 中未定义,它将适应文档其余部分的文本大小。body { font-size: 62.5%; } input { font-size: 1em; } 根据所使用的浏览器,可能会观察到细微差别。为了彻底解决问题,可以通过在 body 中进行相应声明来统一字体类型。body { font: 62.5% Arial,Verdana,sans-serif; } input { font-size: 1em; } 类别:CSS —> 你可以通过 RSS 2.0 feed 跟踪评论。请参阅评论,或欣赏您所在位置的引用。前面的文章:Una fiesta Niquelada Artículo siguiente:布局一个三柱和马卡多…“el justo”Deja tu comentario Los Campos Nombre y Email son obligatorios Añádenos a… Tags que destacamos en General access bert bos blockquote bug cañas citas cite comportamiento conocimiento CSS escuas estándares fieldset Firefox 格式公式隐藏 ie IE 7 信息 javascript legend 列表 尼奎兰多义务歌剧 playa q 壁球假期 w3c WCAG xhtml 这是知识共享许可证。
Testea WCAG desde tu pipeline
El estándar de la industria para testear accesibilidad durante el desarrollo