首页 web前端 css教程 为什么 字段不从所有浏览器中的父元素继承字体样式?

为什么 字段不从所有浏览器中的父元素继承字体样式?

Oct 27, 2024 am 06:31 AM

Why do <input> 字段不会在所有浏览器中从其父元素继承字体样式吗? 
字段不会在所有浏览器中从其父元素继承字体样式吗? " />

字段中的字体继承问题

在 HTML 文档中,某些元素可能不会继承为其父元素定义的字体样式可以在 字段中观察到这一点,如具体示例所示:

<label class="adm" for="UserName">用户名</label> <br><input class="adm" id="UserName" name="UserName" size="30" type="text" value="" />

如果应用 CSS 将字体系列从

元素继承到这些表单元素:

body,html { font-family: Verdana,Arial,Helvetica,sans-serif; 0; 填充:0; 颜色: #111;}<br>label.adm { 字体大小:0.9em; 边距:0 0 3px 3px; 显示: 块;}<br>input.adm { 字体大小:0.9 em; margin:0 0 3px 3px; }

Firefox 使用不同的字体呈现这些元素,而

出现这种差异是因为 默认情况下,所有浏览器中的元素不会继承字体系列。要显式强制继承,可以使用 CSS:

input, select, textarea, button{font-family:inherit;}<br>

通过结合此规则,<输入>字段将从其父级

继承字体系列。元素,确保字体样式的一致性。该解决方案的现场演示可以在 http://jsfiddle.net/gaby/pEedc/1/ 找到。

以上是为什么 字段不从所有浏览器中的父元素继承字体样式?的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

什么是AutoPrefixer,它如何工作? 什么是AutoPrefixer,它如何工作? Jul 02, 2025 am 01:15 AM

Autoprefixer是一个根据目标浏览器范围自动为CSS属性添加厂商前缀的工具。1.它解决了手动维护前缀易出错的问题;2.通过PostCSS插件形式工作,解析CSS、分析需加前缀的属性、依配置生成代码;3.使用步骤包括安装插件、设置browserslist、在构建流程中启用;4.注意事项有不手动加前缀、保持配置更新、非所有属性都加前缀、建议配合预处理器使用。

CSS教程,用于创建粘性标头或页脚 CSS教程,用于创建粘性标头或页脚 Jul 02, 2025 am 01:04 AM

TocreatestickyheadersandfooterswithCSS,useposition:stickyforheaderswithtopvalueandz-index,ensuringparentcontainersdon’trestrictit.1.Forstickyheaders:setposition:sticky,top:0,z-index,andbackgroundcolor.2.Forstickyfooters,betteruseposition:fixedwithbot

什么是圆锥级函数? 什么是圆锥级函数? Jul 01, 2025 am 01:16 AM

theconic-Gradient()functionIncsscreatesCircularGradientsThatRotateColorStopSaroundAcentralPoint.1.IsidealForPieCharts,ProgressIndicators,colordichers,colorwheels和decorativeBackgrounds.2.itworksbysbysbysbydefindefingincolordefingincolorstopsatspecificains off.

CSS自定义属性的范围是什么? CSS自定义属性的范围是什么? Jun 25, 2025 am 12:16 AM

CSS自定义属性的作用域取决于其声明的上下文,全局变量通常定义在:root中,而局部变量则定义在特定选择器内,以便组件化和隔离样式。例如,定义在.card类中的变量仅对匹配该类的元素及其子元素可用。最佳实践包括:1.使用:root定义全局变量如主题色;2.在组件内部定义局部变量以实现封装;3.避免重复声明同一变量;4.注意选择器特异性可能引发的覆盖问题。此外,CSS变量区分大小写,且应在使用前定义以避免错误。若变量未定义或引用失败,则会采用回退值或默认值initial。调试时可通过浏览器开发者工

CSS教程专注于移动优先设计 CSS教程专注于移动优先设计 Jul 02, 2025 am 12:52 AM

Mobile-firstCSSdesignrequiressettingtheviewportmetatag,usingrelativeunits,stylingfromsmallscreensup,optimizingtypographyandtouchtargets.First,addtocontrolscaling.Second,use%,em,orreminsteadofpixelsforflexiblelayouts.Third,writebasestylesformobile,the

CSS教程,用于创建加载旋转器和动画 CSS教程,用于创建加载旋转器和动画 Jul 07, 2025 am 12:07 AM

创建CSS加载旋转器的方法有三种:1.使用边框的基本旋转器,通过HTML和CSS实现简单动画;2.使用多个点的自定义旋转器,通过不同延迟时间实现跳动效果;3.在按钮中添加旋转器,通过JavaScript切换类来显示加载状态。每种方法都强调了设计细节如颜色、大小、可访问性和性能优化的重要性,以提升用户体验。

如何将整个网格集中在视口中? 如何将整个网格集中在视口中? Jul 02, 2025 am 12:53 AM

要让整个网格布局在视口中居中显示,可通过以下方法实现:1.使用margin:0auto实现水平居中,需设定容器固定宽度,适用于固定布局;2.利用Flexbox在外层容器设置justify-content和align-items属性,结合min-height:100vh可实现垂直和水平居中,适合全屏展示场景;3.直接使用CSSGrid的place-items属性在父容器上快速居中,简洁且现代浏览器支持良好,同时需确保父容器有足够高度。每种方式均有适用场景和限制,根据实际需求选择合适的方案即可。

如何创建本质上响应的网格布局? 如何创建本质上响应的网格布局? Jul 02, 2025 am 01:19 AM

要创建内在响应式网格布局,核心方法是使用CSSGrid的repeat(auto-fit,minmax())模式;1.设置grid-template-columns:repeat(auto-fit,minmax(200px,1fr))让浏览器自动调整列数并限制每列最小和最大宽度;2.使用gap控制格子间距;3.容器应设为相对单位如width:100%、配合box-sizing:border-box避免宽度计算错误并用margin:auto居中;4.可选设置行高与内容对齐方式提升视觉一致性,如row

See all articles