ie | 易学教程

标准 DOM 盒模型与 IE 盒模型

阅读更多关于标准 DOM 盒模型与 IE 盒模型

包括四个部分：margin>border>padding>content 在标准DOM盒模型中，dom 的 width 和 height 仅作用于content （IE6 及早期版本的IE7 下 width 和 height 包括了 border 和 padding）因此，一个html元素占据的空间不是width和height，而是这四个部分的加总，另外，由于margin没有内容无法看到(相邻元素都有margin时，你无法凭肉眼确定 dom 占据范围的边界)，如果你设置了border，那么肉眼所见的 DOM 形状就是border>padding>content三项的加总，但是，所占据的空间仍是四项的加总。使用标准盒模型的文档渲染模式有: document.compatMode = "CSS1Compat" 非标准模式(quirke) 下： document.compatMode = "BackCompat" 为了使用 IE 浏览器使用标准模式，可以使用下面的做法： 1、添加文档声明 <!DOCTYPE html> 2、 < meta http-equiv="X-UA-Compatible" content=" IE =edge, chrome=1"> outline 属性：盒模型的outline属性是包围在border外面的边线，设置方法跟border一样

CSS常见兼容问题以及解决办法

阅读更多关于 CSS常见兼容问题以及解决办法

浏览器的兼容性问题，通常是因为不同的浏览器对同一段代码有不同的解析，造成页面显示不统一的情况。这里谈到的浏览器，主要指IE6/IE7/IE... FireFox Chrome Opera Safari 等。但更多的兼容还是考虑IE6/IE7/FF之间的斗争先来谈谈CSS Hack 　　我们为了让页面形成统一的效果，要针对不同的浏览器或不同版本写出对应可解析的CSS样式，所以我们就把这个针对不同浏览器/版本而写CSS的过程叫做 CSS hack. 　　CSS hack主要有三种：IE条件注释法、CSS属性前缀法、选择器前缀法。　　（1）IE条件注释法，即在正常代码之外添加判别IE浏览器或对应版本的条件注释，符合条件的浏览器或者版本号才回执行里边的代码。     　　 (2)CSS属性前缀法，即是给css的属性添加前缀。比如 * 可以被IE6/IE7识别，但 _ 只能被IE6识别，IE6-IE10都可以识别 "\9"，IE6不能识别!important

JS键盘事件种类、兼容和优化

阅读更多关于 JS键盘事件种类、兼容和优化

一、浏览器的按键事件总结用js实现键盘记录，要关注浏览器的三种按键事件类型，即keydown，keypress和keyup，它们分别对应onkeydown、 onkeypress和onkeyup这三个事件句柄。一个典型的按键会产生所有这三种事件，依次是keydown，keypress，然后是按键释放时候的keyup。在这3种事件类型中，keydown和keyup比较底层，而keypress比较高级。这里所谓的高级是指，当用户按下shift + 1时，keypress是对这个按键事件进行解析后返回一个可打印的“!”字符，而keydown和keyup只是记录了shift + 1这个事件。但是keypress只能针对一些可以打印出来的字符有效，而对于功能按键，如F1-F12、Backspace、Enter、Escape、 PageUP、PageDown和箭头方向等，就不会产生keypress事件，但是可以产生keydown和keyup事件。然而在FireFox中，功能按键是可以产生keypress事件的。传递给keydown、keypress和keyup事件句柄的事件对象有一些通用的属性。如果Alt、Ctrl或Shift和一个按键一起按下，这通过事件的altKey、ctrlKey和shiftKey属性表示，这些属性在FireFox和IE中是通用的。二、兼容浏览器

自定义浏览器的滚动条样式

阅读更多关于自定义浏览器的滚动条样式

某厂面试归来，发现自己落伍了！>>> 还在为浏览器中那丑陋的滚动条烦恼么？还在为着想要内容显示,但是滚动条却不希望它显示而烦恼么？如果你还在烦恼这些,那么很荣幸的告诉你,哥哥带你装逼带你飞(哈哈，开玩笑而已，哥你别当真)！传统的浏览器的滚动条样式比较难看(当然,你要是能够接受那请忽略这篇文章),项目中产品经理嫌弃滚动条的样式太难看了(好吧,其实我自己是能接受的,确实我是缺少美感的前端,这是硬伤啊),好吧,既然如此,那我们就只能动手捣鼓它了呗。我们先来看一下传统的浏览器滚动条的样式：好吧,确实是挺丑的,请原谅我的审美！那么现在,我们就要来更改一下这么丑的滚动条了,网上查了很多的资料,发现-webkit-内核的浏览器的支持性是最好的,而IE,好吧,它的滚动条自定制功能并不是很强大,只能控制各个部分的颜色而已,而火狐方面的话,网上查了很多自定义滚动条的方法,发现却是不支持的,真心蛋疼。首先先来看一下在IE下的滚动条的自定义：滚动条样式支持情况支持浏览器版本可否继承描述 scrollbar-3dlight-color IE特有属性 IE5.5+ Y 设置滚动框的和滚动条箭头左上边缘的颜色 scrollbar-highlight-color IE特有属性 IE5.5+ Y 设置滚动框的和滚动条箭头左上边缘的颜色 scrollbar-face-color IE特有属性

js获取非行间样式

阅读更多关于 js获取非行间样式

相关知识： window.getComputedStyle : 　　　　 Window.getComputedStyle() 方法给出应用活动样式表后的元素的所有css属性的值，并解析这些值可能包含的任何基本计算。　　语法：let style = window.getComputedStyle(element, [pseudoElt]); 　　　　pseudoElt ：指定一个要匹配的伪元素的字符串。必须对普通元素省略（或null）。　　　　返回的样式是一个实时的 CSSStyleDeclaration 对象，当元素的样式更改时，它会自动更新本身。　　与伪元素一起使用：　　　　　　　　let h3 = document.querySelector('h3'), 　　　　　　　　result = getComputedStyle(h3, '::after').content; 　　getComputedStyle(odiv,false)这里的两个参数，第一个参数代表要获取那个元素的样式，第二个是解决FF较低版本的写法，而对于高版本的可以不用写。注：在firefox3.6上访问子框架内的样式 (iframe)必须使用 document.defaultView.getComputedStyle ,其他可使用window.getComputedStyle Element

IE打开网页加载js问题

阅读更多关于 IE打开网页加载js问题

2020年3月13日工作问题问题：在jsp页面，下有js文件没有加载出来，但是在f12下，刷新就加载出来了。我打开的网页是360安全浏览器，内核设置为ie8，但是打开网页有一些js文件就是加载不出来，后来查询得知。在ie8/9模式下，只能打开f12生效console方法。在ie6/7，根本没有这个方法。解决： 1.直接一点，删除就可以了 2.用代码解决 if(window.console){ //一些console命令 console.info("gogo")； } 这次的问题发生了，及时的解决，才能更好的锻炼自己。来源： CSDN 作者：山沉链接： https://blog.csdn.net/qq_43925043/article/details/104852580

ie浏览器下登录框上密码查看图标无法点击问题

阅读更多关于 ie浏览器下登录框上密码查看图标无法点击问题

如上图所示密码框后的闭眼按钮鼠标移动上去无法点击，其他浏览器是正常的，推测是le浏览器可能图层层级不够，在图标处z-index增大如下图即可点击查看来源： CSDN 作者： Ace_with_Yu 链接： https://blog.csdn.net/Ace_with_Yu/article/details/104863495

css中!important的作用

阅读更多关于 css中!important的作用

css中!important的作用　　{*rule !important}这个css规则当今在网页制作的时候的普及已经非常流行了，以前我对它的理解就停留在‘浏览器是否识别阶段’ 而没有真正去研究过，可是现在发生了变化。众所周知，!important这个规则对Ie6.0,Ie7.0和Firefox能写hack，现在就来讲解这是什么原理：　　*对于Ie系列浏览器都能够识别， firefox 浏览器则不能识别; 　　!important只有Ie7.0和firefox可以识别，但是Ie6.0不能成功应用. 　　(1)区别ie与firefox的hack为:border:2px solid #f00;*border:1px solid #f00; (2)区别Ie6.0 与Ie7.0、firefox的hack为:border:1px solid #f00!important;border:2px solid #f00; 　　在(1)中，之所以把*放在后面是因为ff不识别*而导致只对它设置了一次border;而ie 系列进行了两次border设置后，后一个属性覆盖了前一个属性，故为一像素的边框。　　在(2)中，之所以把!important放在第一个border 设置，是因为它把这次border的优先级提高了，即使后面在一次甚至在N次设置border 也无效，但是Ie6.0对这个规则不接受

css中！important的用法

阅读更多关于 css中！important的用法

　{*rule !important}这个css规则当今在网页制作的时候的普及已经非常流行了，以前我对它的理解就停留在‘浏览器是否识别阶段’ 而没有真正去研究过，可是现在发生了变化。众所周知，!important这个规则对Ie6.0,Ie7.0和Firefox能写hack，现在就来讲解这是什么原理：　　*对于Ie系列浏览器都能够识别， firefox 浏览器则不能识别; 　　!important只有Ie7.0和firefox可以识别，但是Ie6.0不能成功应用. 　　(1)区别ie与firefox的hack为:border:2px solid #f00;*border:1px solid #f00; (2)区别Ie6.0 与Ie7.0、firefox的hack为:border:1px solid #f00!important;border:2px solid #f00; 　　在(1)中，之所以把*放在后面是因为ff不识别*而导致只对它设置了一次border;而ie 系列进行了两次border设置后，后一个属性覆盖了前一个属性，故为一像素的边框。　　在(2)中，之所以把!important放在第一个border 设置，是因为它把这次border的优先级提高了，即使后面在一次甚至在N次设置border 也无效，但是Ie6.0对这个规则不接受，而导致它应用了第二次的border

转：css中!important的作用

阅读更多关于转：css中!important的作用

　转： http://www.cnblogs.com/guoguo-15/archive/2011/08/24/2151859.html {*rule !important}这个css规则当今在网页制作的时候的普及已经非常流行了，以前我对它的理解就停留在‘浏览器是否识别阶段’ 而没有真正去研究过，可是现在发生了变化。众所周知，!important这个规则对Ie6.0,Ie7.0和Firefox能写hack，现在就来讲解这是什么原理：　　*对于Ie系列浏览器都能够识别， firefox 浏览器则不能识别; 　　!important只有Ie7.0和firefox可以识别，但是Ie6.0不能成功应用. 　　(1)区别ie与firefox的hack为:border:2px solid #f00;*border:1px solid #f00; (2)区别Ie6.0 与Ie7.0、firefox的hack为:border:1px solid #f00!important;border:2px solid #f00; 　　在(1)中，之所以把*放在后面是因为ff不识别*而导致只对它设置了一次border;而ie 系列进行了两次border设置后，后一个属性覆盖了前一个属性，故为一像素的边框。　　在(2)中，之所以把!important放在第一个border 设置

订阅 ie