-webkit-box-sizing: border-box

时间: 2023-10-02 07:05:58 浏览: 77

如何更好地控制input输入框的高度

很久以前 Roger Johansson 就在他的 blog 上做了一个用样式控制表单元素的测试 , 告诉我们企图用样式控制表单元素是一件不可能的事情using CSS to style form controls to look exactly the same across browsers and platforms is impossible 甚至 css2.1 规范中也没有明确这方面的规定 , 而是打算将它 fix in future CSS 2 . 1 does not define which properties apply to form controls and fra 在网页设计中，控制`input`输入框的高度是一项常见的任务，尤其在追求跨浏览器和跨平台一致性时。根据提供的信息，我们了解到试图通过CSS来精确控制表单元素的样式在不同浏览器和操作系统间可能并不一致，因为CSS 2.1规范并没有明确规定如何应用样式到表单控件和框架上。尽管如此，设计师仍然可以尝试利用现有的CSS属性来尽可能地实现统一的视觉效果。在处理输入框高度时，开发者通常会遇到各种浏览器间的差异。例如，设置`height`属性并不总是能确保一致的高度，因为不同的浏览器可能会对字体、内边距(`padding`)、边框(`border`)以及盒模型(`box-sizing`)有不同的解析方式。例如，IE6、IE7、IE8以及Firefox、Chrome等在计算元素总高度时，会考虑到字体大小、行高、内边距和边框宽度。在测试中，开发者可能采用如下的CSS样式来设定输入框的高度： ```html <input type="text" style="font: 16px arial; height: 1.78em; padding-top: 2px;" /> ``` 这里，`1.78em`的`height`是基于16px字体大小的行高计算，而`padding-top`和`padding-bottom`用于调整内部空间。但是，实际的总高度还会受到边框宽度的影响，而在不同浏览器中，边框宽度的默认值可能不同。测试结果显示，即使在样式设置相同的情况下，各浏览器的计算方式和最终高度也会有所差异。例如，Firefox在Windows和Mac上，Chrome在不同操作系统上的表现就不尽相同。IE6到IE8在Windows XP上的表现相对一致，但与其他浏览器相比，它们的计算方式显然不同。解决这个问题的一种方法是利用`box-sizing`属性，它允许我们控制元素的盒模型，使其边框和内边距包含在指定的宽度或高度之内。例如，设置`box-sizing: border-box;`可以使`height`属性包括了内边距和边框，从而提供更一致的计算结果。 ```css input { box-sizing: border-box; -moz-box-sizing: border-box; /* Firefox */ -webkit-box-sizing: border-box; /* Safari/Chrome */ } ``` 此外，还可以考虑使用`line-height`来代替`height`，因为`line-height`在不同浏览器中的行为相对一致。同时，通过为所有浏览器定义明确的边框宽度和内边距，可以进一步减少差异。 ```css input { font-size: 16px; line-height: 1.78; padding: 2px; border-width: 1px; /* 可根据需要设置 */ border-style: solid; /* 可根据需要设置 */ box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } ``` 为了确保在各种环境下的一致性，可以使用CSS预处理器（如Sass或Less）以及自动化工具（如Autoprefixer）来自动添加浏览器特定的前缀，并进行广泛的跨浏览器测试。控制`input`输入框的高度涉及对浏览器渲染差异的理解，以及熟练运用CSS的各种属性和技巧。通过使用`box-sizing`、明确的边框和内边距，以及考虑`line-height`，我们可以尽可能地减小这些差异，实现更加一致的布局效果。

-webkit-box-sizing: border-box 是一个CSS属性，用于指定元素的盒模型的计算方式。在给定的引用中，-webkit-box-sizing: border-box 是用来确定元素的盒模型采用的是border-box方式进行计算。当一个元素的盒模型采用border-box方式进行计算时，元素的宽度和高度包括了边框和内边距的大小，而不会被内容的大小所影响。这意味着元素的实际宽度和高度是元素的内容宽度和高度加上边框和内边距的大小。

阅读全文

-webkit-box-sizing: border-box

相关推荐

WebKit支持的Web开发：CSS属性详解与应用

WebKit样式全览：Web开发者的视觉与交互指南

-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;

*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}

*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}

*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

-webkit-box-sizing: border-box;\n -moz-box-sizing: border-box;\n box-sizing: border-box;

.row { padding: 50px 0 0 50px; display: inline-block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin-left: -50px;}

*,*:before,*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }

*,*:before,*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }加入设置字体大小

-webkit-box-sizing: border-box;

-webkit-box-sizing:border-box;

* { padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box }

-webkit-box-sizing:border-box的意思

-webkit-box-sizing: border-box; 是什么意思

.recommend .box .news .list-item .list-item-body .item-info .time { padding-top: 5px; color: red; font-size: 14px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; box-sizing: border-box; }

最新推荐

精选微信小程序源码：生鲜商城小程序（含源码+源码导入视频教程&文档教程，亲测可用）

Docker-compose容器编排

正整数数组验证库：确保值符合正整数规则

管理建模和仿真的文件

【损失函数与随机梯度下降】：探索学习率对损失函数的影响，实现高效模型训练

在ADS软件中，如何选择并优化低噪声放大器的直流工作点以实现最佳性能？

系统移植工具集：镜像、工具链及其他必备软件包

"互动学习：行动中的多样性与论文攻读经历"

【损失函数与批量梯度下降】：分析批量大小对损失函数影响，优化模型学习路径

在设计高性能模拟电路时，如何根据应用需求选择合适的运算放大器，并评估供电对电路性能的影响？

,:before,*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }

,:before,*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }加入设置字体大小