css 属性的兼容写法、css 盒模型、js 中的高和宽

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 2825 days ago, the information mentioned may be changed or developed.

css 属性的兼容写法

1. 兼容 IE8 的 hack

hack 符：\0/，必须写在属性值与分号之间，中间不加空格

background:red;    //高级浏览器识别  
background:pink\0/;    //仅 IE8 识别

2. 兼容 IE8、9、10 的 hack

hack 符：\0，必须写在属性值与分号之间，中间不加空格

background:red;    //高级浏览器识别  
background:pink\0;    //IE8、9、10 识别

3. 兼容 IE6、7、8、9、10

hack 符：\9，必须写在属性值与分号之间，中间不加空格

background:pink\9;   //IE6、7、8、9、10 识别

css 盒模型

http://wx2.sinaimg.cn/mw690/0060lm7Tly1fuim3mkvgrj30ap075765.jpg
http://wx3.sinaimg.cn/mw690/0060lm7Tly1fuim3mkymtj30au06z0uj.jpg

js 中令人混乱的各种高度宽度

1. width/height

dom.style.width/height
只能取到 dom 元素内联样式所设置的宽高属性值
dom.currentStyle.width/height
IE 下获取所有样式的宽高属性值
clientWidth/clientHeight

Supplement 1 · Aug 22, 2018

上面的按错提交了，补充一下

js中令人混乱的各种高度宽度

1. dom.style.width、height

只能取到dom元素内联样式所设置的宽高属性值

2. dom.currentStyle.width、height

IE下获取所有样式的宽高属性值

3. dom.clientWidth、clientHeight

可视区域的大小
document.documentElement.clientWidth
document.documentElement.clientHeight
普通元素
content + padding

4. dom.offsetWidth、offsetHeight

content + padding + border

5. dom.clientTop、clientLeft

border-top、border-left

6. dom.getBoundingClientRect()

width/height : content + padding + border
x/y : 元素的左上角和父元素左上角的距离
top/left : 元素上/左边界和父元素上/左边界之间的距离
right/bottom : 元素右/下边界和父元素左/上边界之间的距离

7. dom.offsetTop、offsetLest

元素距离窗口上/左边的偏移量

8. dom.scrollWidth、scrollHeight

页面实际的大小
document.documentElement.scrollWidth
document.documentElement.scrollHeight
普通元素
content + padding

9. dom.scrollTop、scrollLeft

一般是document.documentElement.scrollTop、document.documentElement.scrollLeft，普通元素如果没有产生滚动条则值为0

10. window.screenX、window.screenY

窗口左上角和屏幕左上角的距离

11. window.screen.width、window.screen.height

屏幕宽高

12. window.screen.availWidth、window.screen.availHeight

屏幕可用宽高（去除任务栏）

13. window.innerWidth、window.innerHeight

窗口的内高度、内宽度（文档显示区域+滚动条）

14. window.outerWidth、window.outerWidth

整个浏览器窗口的宽高，包括所有

15. window.scrollX、scrollY

文档已滚动的像素值
window.pageXOffset、pageXOffset分别是scrollX、scrollY属性的别名，为了跨浏览器兼容性，建议使用 window.pageXOffset 、pageXOffset代替 window.scrollX、scrollY

4 replies

ReadSong

Aug 22, 2018

\9 IE8 以及以下版本浏览器可以识别，9 和 10 不行的吧

cooljs

Aug 22, 2018

@ReadSong 可以哒

AllOfMe

Aug 22, 2018

这些兼容的写法让我想起了三年前的前端，没有 react,vue,Angular 等框架的存在，项目直接上 jQuery+BootStrap+gulp(grunt) ，不敢随便用 flex，有时候要写各种 IE 的兼容 CSS 写法。
最常看的博客是张鑫旭的个人站，偶尔看看 JQuery 插件，尝试着自己也能撸一个 JQuery 的插件，然后发到 CSDN.net 赚赚积分。
时代发展好快，有点想回到过去(怀旧 boy)

cooljs

Aug 22, 2018

@AllOfMe 框架越来越简单，兼容也不用写太多了，jquery 需要手撸组件，虽然麻烦不过更能锻炼 js 实力，也很爽