有关不同浏览器不同版本的css以及js计算高度的问题

最新推荐文章于 2021-05-22 15:58:52 发布
最新推荐文章于 2021-05-22 15:58:52 发布
阅读量1.1k 收藏
点赞数
分类专栏： jQuery 文章标签： js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tang7837010/article/details/42099321
版权

1.input在所有浏览器以及所有的版本中，都是定义了高度，然后再定义padding或者border值，这时候都会撑开，高度是本身的高度在padding值和border值

2.select在goole浏览器中以及ie8以上浏览器中，定义的height值包括padding值和border值

3.select在ie8及ie8一下浏览其中，select和input一样，都不包括padding和border值

4.在ie浏览器下和google下，用jquery计算高度的时候，高度是不一样的，另外注意，jquery计算高度包括innerHeight和outerHeight之分

striveTom
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
有关不同浏览器不同版本号的css以及js计算高度的问题
weixin_33810006的博客
05-13 125
1.input在全部浏览器以及全部的版本号中，都是定义了高度。然后再定义padding或者border值。这时候都会撑开。高度是本身的高度在padding值和border值 2.select在goole浏览器中以及ie8以上浏览器中，定义的height值包含padding值和border值 3.select在ie8及ie8一下浏览当中。select和input一样。都不包含paddin...
不同浏览器下高度的区别
0溺水的鱼O的专栏
03-15 2356
多浏览器 scrollHeight clientHeight scrollTop offsetHeight 测试 safari opera firefox ie
浅谈CSS在不同的浏览器控制自适应高度
wankwan的专栏
06-27 1203
      对于IE、火狐与Chrome浏览器，每个浏览器之间对布局方面都有自己的一套实现方法。在这里，只使用CSS在IE 6.0+与火狐对自适应高度的实现。     在网页设计时，我们往往使用自适应高度，这样看起来美观些。在这方面，IE可以让我们不用太操心，而火狐就不行了。因为火狐不会自增长，而IE会自增长。如何解决火狐这个自适应高度问题。下面是相对应的CSS .cssstyle{ 
CSS - Select 标签在不同浏览器中的高度设置
weixin_30955617的博客
01-05 156
当使用Select标签时，在不同浏览器中显示的高度不同，如何解决此问题： 解决方法链接：http://stackoverflow.com/questions/20477823/select-html-element-with-height Demo：http://jsfiddle.net/JSDavi/xzdpp9kf/1/ HTML: <select> ...
不同浏览器计算页面高度的不同方法
Frank的专栏
01-16 1257
不同浏览器计算页面高度的不同方法 body{font:12px/1.5 "宋体";} table{ border:1px solid #ccc; border-width:1px 0 0 1px; border-collapse:collapse;} th,td{ padding:4px 15px; border:1px solid #ccc; border-width:0 1px 1
html页面高度不固定在不同浏览器下的兼容性设置
09-25
总之，处理HTML页面在不同浏览器下的高度兼容性问题，需要理解各种浏览器的解析差异，以及正确地利用JavaScript获取和调整页面尺寸。通过遵循W3C标准并结合适当的兼容性处理，可以创建一个在各种浏览器环境中都能...
css:fixed定位兼容不同系列不同版本的浏览器包括IE6.0
09-25
` 这是IE6特有的CSS扩展，用JavaScript表达式动态计算元素的位置。这里的表达式将元素的`top`属性设置为浏览器窗口的滚动距离（`scrollTop`）加上200像素，模拟`fixed`定位的效果。 4. **高度计算**：注释中的...
Javascript解决常见浏览器兼容问题的12种方法
10-29
9. **盒模型差异**：IE浏览器的盒模型与W3C标准不同，使用JavaScript计算元素的实际尺寸时，可能需要考虑盒模型的差异，例如通过`offsetWidth`和`offsetHeight`。 10. **动画平滑性**：不同浏览器对CSS动画和...
CSS3 calc()会计算属性详解
09-27
CSS3的`calc()`函数是CSS样式表中的一个强大功能，允许开发者在声明CSS属性时进行动态计算。这个功能在创建响应式布局、调整元素尺寸等方面尤其有用，因为它可以为浏览器提供一种方式来动态地计算元素的大小。下面将...
让浏览器支持objectfit这css规则
08-11
然而，不同浏览器对这一特性的支持程度不一，尤其是较旧版本的浏览器可能无法原生支持。本文将深入探讨`object-fit`属性的用法、意义以及如何通过JavaScript来实现对不支持`object-fit`的浏览器的兼容性处理。 `...
浏览器高度计算不同导致的显示问题
weixin_34212762的博客
01-08 395
朋友给我发了个文件包，让我看看里面的弹出遮罩层在IE下显示是正常的，但在Firefox等浏览器下弹出一下之后就消失了。 效果如下图，一个遮罩的效果，在Firefox里白色的遮罩DIV很快又消失。 第一反应是是浏览器兼容性问题。找到DIV样式里有filter以为是这个问题，找了一下在非IE下用opacity来解决，可是在其代码里已经有了opacity的定义。看来应该不是这个问题。立马解决是不太...
兼容不同浏览器的获取滚动高度的方法
happyqyt的专栏
04-22 3680
[*]几乎所有浏览器都不支持在document.body上监听整个网页的滚动事件，除了QQ浏览器 [*]几乎所有浏览器都支持在window对象上监听整个网页的滚动事件；[*]几乎所有浏览器都支持在document对象上监听整个网页的滚动事件，除了QQ浏览器；[*]几乎所有浏览器都支持用document.documentElement.scrollTop来获取网页的滚动高度，除了Chrome和Sa
Javascript操作CSS之3——获取元素的真实高度和宽度
张金乙的专栏
06-26 5691
 元素的真实高度可以用getStyle（获取元素属性的方法）求的，但是还要考虑到元素的隐藏等原因，因此需要一个通用的办法。function getFullHeight(elem){if (getStyle(elem,display)!=="none"){return elem.offsetHeight || getStyle(elem,"height");}else{ var old=resetC
兼容在不同浏览器不同分辨率下DIV高度自适应
秀出自己的风采
11-30 5057
在框架中嵌套了页面，页面中有些DIV，但都没有具体高度时，需要让一个div高度自适应时的解决办法 下面是笔者用js来判断不同浏览器的分辨率来动态设置的div高度  var getDiv = document.getElementById("MainArea");             getDiv.style.overflow = "auto";             if (na
不同浏览器获取DOM元素的各种高度
前端小白的博客
02-28 1万+
HTML中高度和宽度的获取，跨浏览器兼容性，以及jQuery中操作
html页面高度
10-19 2646
页面需要嵌套在跨域的iframe中，而页面高度不固定，需要每个页面把自己的高度获得后，通过js通知iframe调整显示。 而页面在获得自己的高度时，发现总是比预想的大。经过参考别人的博客，发现原来是w3c标准的原因。 也就是要在前面加上  加上之后，document.doc
CSS3 使用 calc() 计算高度 vh px
热门推荐
Ranx的博客
09-28 13万+
1、px     像素，我们在网页布局中一般都是用px。 2、百分比    百分比一般宽泛的讲是相对于父元素，自适应网页布局越来越多，百分比也经常用到了。 3、Viewport     viewport：可视窗口，也就是浏览器。     vw Viewport宽度， 1vw 等于viewport宽度的1%     vh Viewport
CSS3--设置元素宽度/高度根据浏览器高度自适应
smaaaaart的博客
05-22 1827
有时候需要页面内元素根据浏览器高度设定，可以用到以下写法： width:calc(100vw - 100px);//宽度是浏览器宽度减100px height:calc(100vh - 100px);//高度是浏览器高度减100px VW是width of view(port)的缩写，也就是浏览器的宽度 VH是height of view(port)的缩写，也就是浏览器的高度 ...
2023最新前端面试题总结
最新发布
05-30
由于不同的浏览器对HTML、CSS以及JavaScript的解析标准可能存在差异，导致同一份源代码在不同浏览器上显示效果不一致。尤其是在老版本的IE浏览器（如IE6/7）中，这类问题尤为突出。解决兼容性问题的关键在于理解和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值