跳转到主要内容
Niquelao 西班牙语 Web 可访问性与前端开发:涵盖 WCAG 标准、可访问组件及 Firefox 扩展,并提供真实代码详解。

本站部分链接为联盟营销链接:如果您通过这些链接购买,我们可能会获得佣金,且不会增加您的成本。这绝不会影响我们的推荐建议。详情请参阅我们的联盟披露声明。 联盟营销披露.

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 v​​el、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。

Worth a look: — El estándar de la industria para testear accesibilidad durante el desarrollo.

以下是各项测试的链接。 链接右侧指明了每种情况下修改的属性。 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