开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用box-sizing时,jQuery.height()在WebKit和Firefox中的行为有所不同:border-box

使用box-sizing时，jQuery.height()在WebKit和Firefox中的行为有所不同。

box-sizing是CSS的一个属性，用于控制元素的盒模型。它有两个取值：content-box和border-box。

content-box：默认值，元素的高度只包括内容的高度，不包括边框和内边距。
border-box：元素的高度包括内容、边框和内边距的高度。

在使用box-sizing属性时，jQuery.height()方法在WebKit和Firefox中的行为有所不同。具体表现如下：

在WebKit浏览器（如Chrome、Safari）中，jQuery.height()方法返回的是元素的内容高度，不包括边框和内边距的高度。这是因为WebKit浏览器默认使用的是content-box盒模型。
在Firefox浏览器中，jQuery.height()方法返回的是元素的总高度，包括内容、边框和内边距的高度。这是因为Firefox浏览器默认使用的是border-box盒模型。

为了解决这个兼容性问题，可以使用CSS的box-sizing属性来统一不同浏览器的行为。例如，可以将box-sizing设置为border-box，使得jQuery.height()方法在不同浏览器中返回的都是元素的总高度。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云产品：云服务器（https://cloud.tencent.com/product/cvm）
腾讯云产品：云数据库 MySQL 版（https://cloud.tencent.com/product/cdb_mysql）
腾讯云产品：云存储（https://cloud.tencent.com/product/cos）
腾讯云产品：人工智能（https://cloud.tencent.com/product/ai）
腾讯云产品：物联网（https://cloud.tencent.com/product/iot）
腾讯云产品：移动开发（https://cloud.tencent.com/product/mobdev）
腾讯云产品：区块链（https://cloud.tencent.com/product/bc）
腾讯云产品：元宇宙（https://cloud.tencent.com/product/mu）

相关搜索:Flex在chrome和Firefox中的行为不同。在iframe上使用javascript时Firefox的奇怪行为导航栏在Chrome和Firefox中的行为不同打印媒体在Firefox和Chrome中的行为不同 Python +=运算符在使用函数返回值时的行为有所不同使用变换和可见性CSS属性时，在Firefox中不显示SVG 当在Chromium和Firefox/Opera中查看时，Blogger.com上的CSS的行为/对齐方式不同 Netlogo中的行为空间在使用扩展R时崩溃使用css重置元素在Chrome和Firefox中的不同位置 Tab函数在使用html和javascript的firefox中不起作用使用枚举值作为类型时的意外行为(在Typescript中)在Gmail中通过Chrome和Firefox访问HTML电子邮件时，HTML电子邮件的显示方式会有所不同。我如何防止这种情况发生？在pandas中组合字符串列和NaN值时的意外行为如何使用Firefox userContent.css中的css在div中添加前缀和后缀在TensorFlow/Keras中，当使用学习率衰减时，恢复训练时的行为是什么？在onclick和href中设置位置时的行为不同(两者的js相同)使用win32com.client.dispatch函数在python中打开Excel和Word时的不同行为在Android P和Q Beta中以编程方式切换异常时的意外行为在二维数组和元素排序中更改迭代方向时的不可预测行为 C# Selenium在Chrome和Firefox中打开新选项卡时没有新的窗口句柄

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

总结 | 移动端 CSS 常用小结

" content=“email=no"/> 禁止文本选择 -webkit-user-select:none 屏蔽输入框阴影，去掉按钮默认样式 -webkit-appearance:none border-box...想要设置一个宽度100%的元素，又要设置元素固定的 padding-left 或 padding-right，还有边框，就会出现水平滚动条，可以用 box-sizing 来解决。...*, *:before, *:after { -webkit-tap-highlight-color: transparent; -webkit-box-sizing: border-box...; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } css3...*zoom: 1; } 表格内容自动换行 table-layout :fixed;word-break: break-all;word-wrap :break-word; iOS 快速回弹在

1.1K3 0

box-sizing取值、属性、用途、默认值

CSS3中box-sizing属性 box-sizing的功能是用来调整块儿与块儿之间外边距的计算方式。...取值范围有3种： content-box(默认值); border-box; inherit; content-box ：以盒子内容区域+padding(内边距)+border(边框)+margin...(外边距); border-box : 将盒子设定为怪异盒子模型，当指定盒子大小之后，无论边框怎样，内边距怎样，始终不影响盒子大小，仅受外边距影响。...由于box-sizing是CSS3的新功能，各家浏览器的支持程度不一,所以我们必须使用前缀(Prefixes)来提醒浏览器要正确使用 box-sizing 的属性功能，例如： firefox 使用 -...moz- 前缀； Safari 使用 -webkit- 前缀；

1.7K1 0

【移动端网页布局】移动端网页布局基础概念 ⑨ ( webkit 内核 | 移动端网页 CSS 初始化 - normalize.css )

一、webkit 内核移动端浏览器都是基于 webkit 内核的 , QQ 浏览器 / 百度 / Safari / UC 都是基于 webkit 内核的 ; 移动端网页布局需要兼容普通浏览器...与 webkit 浏览器 ; webkit 内核浏览器对 HTML5 + CSS3 支持的很好 , 移动端可以放心使用 H5 标签和 CSS3 样式 , 但是如果在 PC 浏览器使用了这些标签 , 可能导致低版本浏览器不兼容的情况...; 二、移动端网页 CSS 初始化 - normalize.css ---- 移动端网页的 CSS 初始化 , 一般使用 normalize.css 样式文件 , 该初始化文件有以下优点 : 对有价值的默认值进行了初始化...: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */...Remove the padding in IE 10. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1

9801 0

【一起来烧脑】一步学会CSS3体系

这是我们使用的图片素材： background-image属性添加背景图片 background-size...moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari 和 Chrome */ -o-transition...div { column-count:5; -moz-column-count:5; /* Firefox */ -webkit-column-count:5; /* Safari 和 Chrome...image.png CSS3 用户界面 div { resize:both; overflow:auto; } box-sizing 属性允许以确定的方式定义适应某个区域的具体内容。...div { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box;

7102 0

webpack系列---插件（plugin）的使用

模块对象 ] } 上篇我们还讲到 webpack-dev-server是将我们的bundle.js托管到内存中，提高编译速度，但是我们的html页面还是磁盘上的，如果我们想得到更好的编码体验...> 5% in US指定国家使用率覆盖 last 2 versions所有浏览器兼容到最后两个版本根据CanIUse.com追踪的版本 Firefox ESR火狐最新版本 Firefox > 20指定浏览器的版本范围...: rotate(45deg); border:1px solid red; border-radius: 45px; -webkit-box-sizing: border-box...; box-sizing: border-box; } 文件压缩可以看到css文件没有压缩，有时候我们需要打包后的css文件压缩 cnpm i optimize-css-assets-webpack-plugin...:rotate(45deg);border:1px solid red;border-radius:45px;-webkit-box-sizing:border-box;box-sizing:border-box

5001 0

Vite 项目中如何去集成 Sass

首先安装 pnpm add sass -D pnpm add sass-loader -D 样式方面我们首先是会想到要给项目进行默认样式的重置，此时我们应当去使用一个比较稳定的npm 包的样式重置代码：...Address `box-sizing` set to `border-box` in Safari 5 and Chrome * (include `-moz` to future-proof...，我们先试试直接在index.scss 文件中进行变量的定义，看看能不能在 vue 应用中进行使用： @import '..../reset/index'; // 全局变量的配置 $color: red; 这里就直接报错了可是我们在 main.ts 中进行导入了呀，为毛就不行呢？.../src") // 相对路径别名配置，使用 @ 代替 src } }, // scss 全局变量的一个配置 css: { preprocessorOptions: {

1240 0

Normalize.css ——CSS Reset的友好替代品

和其他浏览器间的不一致 */ a:focus { outline: thin dotted; } /* * 增强在所有浏览器中聚焦和鼠标悬停时的可读性...: 1px dotted; } /* * 校正 Firefox 4+， Safari 5 和 Chrome 中‘bolder’的样式 */ b,...4+ 用户代理样式表（UA stylesheet）中在‘input’上 * 设置‘line-height’时使用‘!...避免 Android 4.0.* 中的 WebKit bug ，该bug会破坏原生的‘audio * 和‘video’控制器 * 2....校正 Safari 5 和 Chrome 中 ‘box-sizing’ 被设置为 `‘border-box’ 的问题 * (include `-moz` to future-proof)

2.2K9 0

CSS魔法堂：盒子模型简介

四、CSS3规则——box-sizing　　　　　　　　　　　　　　　　　　　　　　　　　　　 box-sizing有三个值，默认是content-box（表示元素使用W3C盒子模型），而border-box...（表示元素使用IE盒子模型），inherit（从父元素上继承）浏览器支持：IE8开始支持 Element{ -moz-box-sizing: border-box; // FireFox3.5+...-o-box-sizing: border-box; // Opera9.6(Presto内核) -webkit-box-sizing: border-box; // Safari3.2+...-ms-box-sizing: border-box; // IE8 box-sizing: border-box; // IE9+,Chrome10.0+,Safari5.1+,Opera10.6...CSS3样式规则box-sizing就明白了。

5166 0

面试官：对下面的 CSS 题目回答一遍

标准盒子模型在标准模型中，如果你给盒设置 width 和 height，实际设置的是 content box。...默认浏览器会使用标准模型。如果需要使用替代模型，您可以通过为其设置 box-sizing: border-box 来实现。...这样就可以告诉浏览器使用 border-box 来定义区域，从而设定您想要的大小。 .box { box-sizing: border-box; } 如何垂直居中？...: grid|inline-grid）多容器（column-count 或者 column-width）不为 auto 产生的影响浮动定位和清除浮动时只会应用于同一个BFC内的元素。...浮动不会影响到其他BFC种的元素的布局，清除浮动只能清除同一个BFC中在它前面的元素的浮动外边距折叠也只会发生在属于同一BFC的块级元素之间利用 BFC 避免 margin 重叠下面这个例子会发现

1.3K2 0

win8效果的横向布局

有一个月没写过博客了，自己的博客也没有看过，前段时间一直在忙着写代码，公司有一个制漆的产品，与传统纵向布局不一样，要求页面横向布局，类似win8的那种布局效果，最开始，我也没有什么头绪，然后硬着头皮做了...，后来，遇到了很多麻烦，我网上查了一些资料，但都不太好，只好自己做了，在做的过程中，突然想到，flex布局，我就试了一下，成功了 *{ box-sizing:border-box; padding:0;margin:0;border...doctype html> *{box-sizing:border-box;} html{ height:100%...win8横向布局：注意点： 1、flex的兼容性写法 2、inline-block的兼容性写法 3、html标签设置高度为100%时，body高度不能设置为100%，否则会出现滚动条 4、html与body

2.1K3 0

”盒模型“之如何防止边框和内边距把元素撑开

在我们讨论宽度的时候，我们应该讲下与它相关的一个重点知识：盒模型。当你设置了元素的宽度，实际展现的元素却能够超出你的设置：因为元素的边框和内边距会撑开元素。...当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。...; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box...box-sizing: border-box; } 这样可以确保所有的元素都会用这种更直观的方式排版。...既然 box-sizing 是个很新的属性，目前你还应该像我之前在例子中那样使用 -webkit- 和-moz- 前缀。这可以启用特定浏览器实验中的特性。同时记住它是支持IE8+。

1.3K6 0

移动端页面开发遇到的一些问题

:focus::-webkit-input-placeholder{ color: #eee; } 5、去除 android a/button/input 标签被点击时产生的边框 & 去除 ios...a 标签被点击时产生的半透明灰色背景 a,button,input { -webkit-tap-highlight-color:rgba(255,0,0,0); } 6、ios 使用 -webkit-text-size-adjust...-- 选择视频 --> 2、取消 input 在ios下，输入的时候英文首字母的默认大写 <input autocapitalize...; box-sizing: border-box; } /* 强制换行 */ .toWrap{ /* 只对英文起作用，以字母作为换行依据。...:5; } 7、定义伸缩项目占空间的份数 /* -moz-box-flex: 2.0;*/ /* Firefox */ /* -webkit-box-flex: 2.0; *//* Safari 和

7512 0

【CSS】：normalize.css

元素的默认样式包含 font-size: 2em；margin：.67em 0;，但是作为 article,aside,nav,section 元素的后代元素时，h1 元素的默认样式变更为 font-size.... */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /...: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */...Remove the padding in IE 10. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1...Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance

1.8K1 0

CSS样式更改——用户界面和指针类型

前言上篇文章主要讲述了CSS样式更改中的多列、元素是否可见、图片透明度基础知识，这篇文章我们来介绍下CSS样式更改中用户界面和指针类型基础用法。...调整元素的宽度 vertical 调整元素的高度 2).规定两个并排的带边框的框 box-sizing div { box-sizing:border-box; -moz-box-sizing...:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ } content-box 宽度和高度分别应用到元素的内容框...在宽度和高度之外绘制元素的内边距和边框。 border-box 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。...指示可用的帮助（通常是一个问号或一个气球）参考文档：W3C官方文档（CSS篇）二、总结这篇文章主要介绍了CSS样式更改篇中的用户界面和指针类型基础知识，希望让大家对CSS样式更改有个简单的认识和了解

1.3K1 0

GitHub 和 Twitter 都在用的 CSS 库

目前 Twitter、GitHub、Medium、Guardian、GOV.UK、CSS Tricks 和 Bootstrap 等许多其他框架、工具包和站点都在使用。...主要作用：与许多 CSS reset 不同，保留有用的默认值，而非删除它们。标准化各种元素的样式。纠正错误和常见的浏览器不一致问题。通过细微的修改提高可用性。使用详细注释解释代码的作用。...包括 HTML5 元素的显示设置、更正 font-size 预格式文本、IE9 中的 SVG 溢出以及跨浏览器和操作系统的许多与表单相关的错误。...Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof) */ input[type="...{ -webkit-appearance: none; } 开源前哨日常分享热门、有趣和实用的开源项目。

541 0

css怎么隐藏滚动条「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。...法一： ①使用伪类隐藏滚动条（仅限Chrome与Safari） ②scrollbar-width: none;（仅限firefox） ③-ms-overflow-style: none;（仅限IE...10+） /* 隐藏滚动条 */ .element { width: 100%; height: 72px; box-sizing: border-box; padding-top...*/ -ms-overflow-style: none; /* IE 10+ */ } .element::-webkit-scrollbar { display: none...如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

4.4K2 0

界面设计技法之布局

当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。...; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box...box-sizing: border-box; } 既然 box-sizing 是个很新的属性，目前你还应该像我之前在例子中那样使用 -webkit- 和 -moz- 前缀。...媒体查询是做此事所需的最强大的工具。现在我们的布局在移动浏览器上也显示的很棒。这里有一些同样使用了媒体查询的著名站点。在MDN文档中你还可以学到更多有关媒体查询的知识。...flexbox布局新的 flexbox 布局模式被用来重新定义CSS中的布局方式。很遗憾的是最近规范变动过多，导致各个浏览器对它的实现也有所不同。这次分享一些例子，来让你知道即将发生的改变。

1.2K1 0

【前端面试题】04—33道基础CSS3面试题(附答案)

3D转换 webkit-transtorm:translate3d（0,0,0）； //开启GPU硬件加速模式，使用GPU代替CPU渲染动画注意：在某些 Android系统中，有时会有莫名其妙的Bug...5、CSS3动画如何在动作结束时保持该状态不变？采用 animation- fill-mode。其可以设置为以下值。 none，不改变默认行为。...forwards，当动画完成后，保持最后一个属性值（在最后一个关键帧中定义） backwards，在 animation-delay所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义...它们的区别在于，使用 Transition的功能时只能用指定属性的开始值和结束值，然后在这两个属性值之间使用平滑过渡的方式实现动画效果，因此不能实现比较复杂的动画效果。...：3； -moz-column-gap：40px； /*Firefox*/ -webkit- column-gap：40px； /* Safar1和 Chrome*/ column-gap：40px

2.8K1 0

css3动画知识

{background:blue;} 100% {background:green;} } 注释：当动画完成时，...会变回初始的样式。... 注释：本例在 Internet Explorer 中无效。...: twinkling1 1s infinite ease-in-out;animation: twinkling1 1s infinite ease-in-out;box-sizing:border-box...twinkling1 /* Safari 和 Chrome */ { 100% {width:20px;height:20px;border-radius:50%;background:yellow

8487 0

当CSS遇上表单控件

尤其是checkbox和radio group，尝试对它们设置样式时会遇到各种问题确实会出现某些CSS属性在表单元素身上失效的问题，比如input上的display: table-cell无效，详细见...: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0.8rem 0.6rem;...mac-chrome&safari Chrome下disabled文本颜色没有差异（Firefox下也没有差异），Safari下似乎有肉眼不可见的差异（放大n倍后能发现取色差异）。...当然，在开发过程中尽早真机自测很容易发现问题，但更应该从实现方案上避免这种情况 P.S.这个案例场景主要是因为偷懒，可交互的表单页与不可交互的分享页共用了相同的HTML结构，所以直接给textarea设置了...disabled，期望它看起来和div一样，结果发现了这个隐蔽的问题三.去掉表单元素默认样式在移动端或者兼容性允许的环境，可以使用下面的CSS去掉文本框默认样式： input, textarea {

9003 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭