使用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）
相关·内容
我一直在解决这个很小但非常恼人的跨浏览器CSS问题:出于某种原因，Firefox显示的框/输入字段与其他浏览器的测量值不同。似乎firefox在某种程度上忽略了box- like : border-box，而是仍然用自己的方法来衡量这些框。这里的原因是什么？有没有什么泡泡糖的解决方案？我已经准备好了。加号按钮旁边的字段是“fakefield”，由于某种原因，它们在
浏览 1提问于2013-01-04得票数 2
回答已采纳
我有一个带填充的<div>。我已经将它设置为height: 0，并赋予它overflow: hidden和box-sizing: border-box。<div>Hello!</div>div { -moz-box-sizing: border-box;
box-sizing:border-
浏览 0提问于2013-12-30得票数 85
回答已采纳
2回答
我正在为它编写一个基本的表单模板和样式表，我无法放置我收到的错误。使用唯一的“双”边框属性，在样式形式时，它将边框推开包含的元素，并破坏外观。
浏览 3提问于2014-04-01得票数 0
回答已采纳
2回答
当单独使用时，display: table和display: table-cell在不同的浏览器中的行为不同。; -moz-box-sizing: border-box; -webkit-box-sizing:
浏览 3提问于2016-02-10得票数 2
回答已采纳
如果容器宽500 6px，标签宽30%，输入框宽70%，那么一切都应该适合，但问题是，输入框的左、右边框为4px，填充左和右为2px，使其6PX比它更宽。(我们不能重新设置CSS，因为输入框通常需要一个边框，假设我们不使用outline来破解它，它不占用任何空间)。outWidth: 356 (用于输入框，如调试控制台所示)
不会包装，但是输入框将超出容器的宽度
浏览 4提问于2014-04-26得票数 0
回答已采纳
当涉及到转换页面右边缘的文本时，我发现自己面临着一个不同之处。似乎Chrome(左)和Firefox(右)在正确的行为上存在分歧：这就是转换： -webkit-tap-highlight-color: rgba(0, 0, 0,
浏览 0提问于2020-09-10得票数 0
在WebKit、Firefox和Opera中，您可以将各种表元素设置为display: block，以阻止它们像表一样显示：
是否还有其他代码可以阻止IE9(或更早版本)将表设置为表？
浏览 0提问于2012-04-03得票数 5
回答已采纳
它全部在Firefox和中工作，而不是在chrome中工作。
第一个版本来自谷歌Chrome，下一个版本(一个正确)来自mozzila，但它与IE相当。: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefo
浏览 3提问于2014-08-10得票数 0
回答已采纳
3回答
我正在处理vBulletin主题，但在线程列表中，每个线程都有100%的宽度，但线程也比它们的父线程大，但当我移除线程的边界时，它们将适合父线程的div:)。所以我认为这个问题是边界问题。你可以在上看到更好的效果(线程是黑色边框的白色形状) <div class="after-body">
<div class="body-wrapper">
浏览 0提问于2013-08-03得票数 43
回答已采纳
我这里有个菜单
我希望突出显示(悬停)延伸到外部框(服务菜单)的边缘。就像弹出菜单一样。菜单本身包含在另一个div中-
我认为不可能像使用负边距那样使用负边框。有没有人知道如何在悬停时将菜单的高亮部分延伸到外部框的边缘？
顺便说一下，这是Drupal w/ Nice Menu。
浏览 0提问于2011-06-28得票数 5
回答已采纳
1回答
我正在使用Potomaks Instagram Jquery脚本来为某个标记提取图像。我已经将CSS设置为自动调整图像大小，这样行将适合整个表。现在，无论图像是10%，15%，20%，在右边都有差距。我的html如下： <
浏览 10提问于2013-05-23得票数 1
回答已采纳
3回答
我想设置一个div始终在300像素，即使我改变边框，填充等。我想自动减去边框，填充值从300 if。我怎么能这么做？
浏览 8提问于2014-05-02得票数 1
回答已采纳
2回答
我想在即将推出的ghost仪表板中创建一个文本元素，其周围有一个边框，如下所示： border: 10px solid #ffffff;我不确定如何做到这一点，或者它是否需要JS，或者它是否可以用纯CSS完成。
浏览 0提问于2014-05-14得票数 2
回答已采纳
我在使用font-family:segoe时遇到了问题。我有一个select dropdown，在这个select中，当我在css中应用padding时，它会从底部剪切文本，参见下面的图片
这是在Chrome:你可以看到这两张图片的不同之处CSS color: #858585; padding: 5px 10px;
浏览 0提问于2013-05-10得票数 0
我有一个在宽度和高度上负责的div。在它里面我有另外两个宽度固定的尺寸，一个在左边，另一个在右边。 -moz-box-sizing: bor
浏览 2提问于2014-08-09得票数 2
回答已采纳
3回答
我被告知，内部元素的百分比宽度是根据总宽度(噢，外部元素)计算的，而同一内部元素的边距和间隙是根据外部元素的内容宽度计算的。当我试着用它不起作用的时候。我根据外部元素的内容宽度获得所有内容(宽度、填充和边距)。：<body><div class="inner">
</div&
浏览 1提问于2014-02-07得票数 1
回答已采纳
2回答
我正在开发一个使用UI-路由器和许多嵌套视图的web应用程序。我们的主要视图使用Flex占据屏幕上的所有可用空间(包括高度和宽度)。我这么说是为了找出为什么我们有这么多嵌套的flex容器。在Firefox上，滚动条位于主体上，或者是外部div中的一个，容器根本无法工作。
我需要所有浏览器的一致行为，有什么想法吗？我试图确保我们使用</em
浏览 6提问于2015-08-17得票数 2
1回答
问题*, *:before, *:after { -webkit-box-sizing: border-box; margin:0;}
尽管如此，但在不同的浏览器中，我与具有设置高度的div的高度不一致。Div
浏览 0提问于2014-04-21得票数 0
3回答
当我在我的一个项目中工作时，我发现CSS框大小调整属性在Firefox中不会自动继承。不过，Chrome会帮你完成这项工作。在我的例子中，它是这样的：
<form style="box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:bor
浏览 0提问于2013-06-04得票数 2
回答已采纳
2回答
我使用图像作为按钮，并有一些CSS使背景看起来和行为像一个按钮。这在所有浏览器中都能很好地工作，而且在我所拥有的大多数页面上都是如此。在Firefox中的这一个按钮上，一半的图像被切断。我怎样才能让它在Firefox中出现相同的外观呢？
&
浏览 1提问于2015-03-07得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
