CSS常见BUG/清除浮动/跨浏览器兼容/函数作用域/闭包
来源:互联网 发布:java老版经典手机游戏 编辑:程序博客网 时间:2024/06/14 17:10
1.CSS常见bug
①双外边距浮动
<!doctype html><html><head> <title></title> <meta charset='utf-8'> <link rel="stylesheet" type="text/css" href=""> <style type="text/css"> body{ border: 1px solid orange; height: 60px; } div#box{ margin-left: 10px; background-color: #fab; float: left; display: inline; } p{ margin:20px; background-color: teal; } </style></head><body> <div id='box'> <p>This is paragraph has 20px margin</p> </div></body></html>
②ie5,6的3像素文本偏移bug
p{ height:1%; margin-left:0;}.myFloat{ margin-right:-3px;}//如果浮动元素时图像//ie 5.xp{ height:1%; margin-left:0;}img.myFloat{ margin:0 -3px;}//ie 6.xp{ height:1%; margin-left:0;}img.myFloat{ margin:0;}
③ie6重复字符
Description:一系列浮动元素的最后一个元素中最后几个字符会在浮动元素下方重复。
Why:在这一系列浮动元素中,首尾元素之间存在多个注释,y=2*(i-2),i>=2
Solution:从HTML中压缩或删除注释。
④ie6“藏猫猫”bug
Description:某种情况下,文本”消失”了。
Why:内容出现在浮动元素的旁边,而最后跟了一个清除的元素,实际上是隐藏于父元素的背景颜色或图像之下,只有当刷新页面时才会重新出现。
Solution:①去掉父元素的背景或图像。②为防止清理元素与浮动元素接触,将容器里的元素应用特定的尺寸。③为容器设定行高。④浮动和容器元素的position设置为relative。
⑤相对容器中的绝对定位。
Description:绝对定位会按照视口进行定位,而非相对容器。
Solution:为相对容器增加height:1%;
【参考:http://www.iyunlu.com/view/css-xhtml/55.html】
2.清除浮动(clear)还是闭合浮动(enclosing)?
from:http://www.iyunlu.com/demo/enclosing-float-and-clearing-float/index.html
3.清除浮动的最佳方案:通过CSS加入一个能使用clear:both的媒介。—:after伪元素
好文章:【BFC神奇背后的原理】from:http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
**【那些年我们一起清除过的浮动】from:http://www.iyunlu.com/view/css-xhtml/55.html
div.parent:after{ content:'.';//加入一个点 height: 0;//避免生成内容破坏原有布局的高度,如图 visibility: hidden;//隐藏掉该点 display: block;//使生成的元素(点)以块级元素显示,占满剩余空间。 clear:both;// }
4.跨浏览器兼容
①
function getInnerText(element){ return (typeof element.textContent == 'string' ? element.textContent : element.innerText);}function setInnerText(element,text){ if(typeof element.textContent == 'string'){ element.textContent = text; }else{ element.innerText = text; }}
②
function contains(refNode,otherNode){ if(typeof refNode.contains == 'function' && //ie (!client.engine.webkit || client.engine.webkit >= 522)){ return refNode.contains('otherNode'); }else if(typeof.compareDocumentPosition(otherNode) == 'function'){ //DOM Level 3 return !!(refNode.compareDocumentPosition(otherNode) & 16); }else{ var node = otherNode.parentNode; do{ if(node===refNode){ return true; }else{ node = node.parentNode; } }while(node != null) return false; }}
③
function matchesSelector(element,selector){ if(element.matchesSelector){ return element.matchesSelector(selector); }else if(element.msMatchesSelector){ //ie 9+ return element.msMatchesSelector(selector); }else if(element.mozMacthesSelector){ //Firefox 3.6+ return element.mozMacthesSelector(selector); }else if(element.webkitMacthesSelector){ //Safari 5+ Chrome return element.webkitMacthesSelector(selector); }else{ throw new Error('Not supported.'); }}if(matchesSelector(document.body,'body.page1')){ //do something}
④
var EventUtil={ addHandler:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false);//冒泡阶段---DOM Level 2 }else if(element.attachEvent){ element.attachEvent('on'+type,handler); }else{ element['on'+type] = handler; } }, removeHandler:function(element,type,hander){ if(element.removeEventListener){ element.removeEventListener(type,hander,false); }else if(detachEvent){ element.detachEvent('on'+type,handler); }else{ element['on'+type] = null; } }, getEvent:function(event){ return event ? event :window.event; //DOM Levl 0中event对象作为window的一个属性 }, getTarget:function(event){ return event.target || event.srcElement;//DOM ie }, preventDefault:function(event){ if(event.preventDefault){ event.preventDefault(); //DOM }else{ event.returnValue = false; //ie } }, stopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); //DOM }else{ event.cancelBubble == true; } }};
5.函数作用域
①定义在函数中的参数和变量在函数外部是不可见的,但在一个函数任意位置定义的变量,在该函数内部任何地方都可见。
②
var foo = function(){ var a = 3,b = 5; var bar = function(){ var b=7,c=11; //此时 a=3,b=7,c=11 a += b+c; //此时 a=21,b=7,c=11 }; //此时 a=3,b=5,c未定义 bar(); //此时 a=21,b=5,c未定义};
③作用域的好处:内部函数可以访问定义它们的外部函数的参数和变量(除this&arguments)。
6.闭包
var fade = function(node){ var level =1; var step = function(){ var hex = level.toString(16); node.style.backgroundColor = '#ffff' + hex +hex; if(level < 15){ level += 1; setTimeout(step,1000); } }; setTimeout(step,3000);//three two one yellow ------- white } fade(document.body);var add_the_handlers = function(nodes){ var helper = function(i){ //辅助函数 return function(e){ alert(i); } } var i; for(i=0;i<nodes.length;i++){ //避免在循环中创建函数 nodes[i].onclick = helper(i); }};
- CSS常见BUG/清除浮动/跨浏览器兼容/函数作用域/闭包
- CSS clear 清除浮动,兼容各浏览器
- 常用清除浮动方式与浏览器兼容
- css 清除浮动 兼容IE+, FF
- CSS清除浮动 clearfix:after 使用技巧及兼容Firefox等符合W3C标准的浏览器
- CSS中清除浮动的作用以及如何清除浮动
- CSS基础-5 浮动,margin的bug,清除浮动
- CSS-浮动&清除浮动
- 浏览器兼容的一些常见bug搜集
- css控制之浏览器兼容bug
- 各种主流浏览器CSS、BUG兼容-
- 清除浮动的作用
- 清除浮动的作用
- [CSS]clearfix 清除浮动元素及去掉浏览器默认样式
- 常见的 3 种CSS清除浮动方法
- 常见的浏览器兼容以及css问题
- CSS浮动和清除浮动
- css浮动与清除浮动
- Class.newInstance()
- C++ 实时获取CPU使用率的类 (源码)
- Apache简介
- Oracle12c 容灾切换完全步骤
- 运动目标算法跟踪综述
- CSS常见BUG/清除浮动/跨浏览器兼容/函数作用域/闭包
- word 里面插入 mathtype格式的公式,行间距变宽怎么办_
- django 认证系统
- C/C++获取操作系统、CPU、内存信息
- linux初学者-磁盘拉伸缩减篇
- 【TensorFlow】Windows10 64位下安装TensorFlow
- jquery系列教程2-style样式操作全解
- webpack如何使用webpack-dev-middleware进行热重载(详解)
- 485. Max Consecutive Ones