由于开发项目中遇到很多 让人头疼的兼容,和不同浏览器之间的问题, 所以写了一些备忘强化对笔记, 如果各位有碰到的可以参考参考。
-----------------------------------------------------------------------------------
随后我会分享几个项目中用到的功能组件, 日历预订(价格、订购)、动态验证、轮播图
只为提升自我水平和更多粉丝 .......哈哈!..
------------------------------------------------------------------------------------
子级元素flat:left后 撑开父级元素方法: CSS中加入overflow:hidden; clear:both; IE中加入zoom:1;
子级absolute 在父级元素中定位, 父级CSS中加入 position: relative;
用于隐藏标签图片中的文字、按钮文字, 只需要text-indent: -9999px;
zoom:1; 解决IE浮动问题,
background-color: Transparent; 背景透明, 多处用于按钮背景有灰色背景问题
解决IE6双倍padding:
IE6下 让fiexd定位方法 * html #lvjiawrap{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}
IE6,7 在没有浮动或进行盒装的情况下(display:inline / float)会有双倍间距问题
解决IE6最小高度问题 #test { min-height:100px; background:#BBB; _height:100px; overflow: visible; }
min-height:100px;这一句在ie7和FF已经可以正常显示了。。
_height:100px这一句在ie6,ie5测试显示正常。但不能过W3C验证:L
overflow:visible;这一句为了注明#test当内容超过100px时就自动延长。
关于span,a, 等内联问题, 用display 进行盒装元素
display :block
relative 被遮挡问题
叠加原则中指出,非同辈元素,任意一者或其祖元素拥有动态定位时,同时各自向上寻找动态定位的祖元素,并分别从中拿出具备最高级别的祖元素(或其本身)进行比较。
关于浮动清除
"浮动元素之后的元素会自动围绕该浮动元素。如果你不希望这样,你可以为这些元素应用'clear'属性。该属性有4种设值:clear: left, clear: right, clear: both or clear: none"
有很多技巧可以做到清理浮动元素,但不引入额外的无语义标签。下面3种是比较常见的做法: a) 将容器元素一起浮动 b) 在容器元素上使用 overflow: hidden c) 使用:after这样的css伪类。
"插入一个清理元素是使容器正确包裹所有浮动元素的标准做法,这样做具有将容器底部边缘'拖拉'以包裹所含元素的效果。"
"对于基于浮动设计的布局来说,一个常见的问题就是浮动元素的容器不会自动伸展来包含浮动元素。如果你希望在所有的浮动元素的外面加上边框(例如,在容器元素上加上边框),这样你必须显示的命令浏览器来伸展容器。你可以是用overflow method方法。"
使用:after 想像一下我们使用:after来插入一个点号,并且设置它的属性{clear: both;}。这就是所有你需要做的事情,但是没有人会接受容器底部有那么一丝空隙,所以我们还要设置{height: 0;} 和 {visibility: hidden;} 来保证严丝合缝。
CSS 导入外部CSS方法
@import "jquery.ui.base.css";
@import "jquery.ui.theme.css";
webkit内核浏览器可以使用CSS自定义滚动条样式:
#doc ::-webkit-scrollbar-track-piece{background-color:#fafafa;-webkit-border-radius:0;-webkit-border-bottom-right-radius:8px;-webkit-border-bottom-left-radius:8px;border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:8px 8px;border-bottom-left-radius:8px 8px;}
#doc ::-webkit-scrollbar{width:9px;height:9px;}
#doc ::-webkit-scrollbar-button:start:decrement,#doc ::-webkit-scrollbar-button:end:increment{display:block;height:0;background-color:transparent;}
#doc ::-webkit-scrollbar-thumb:vertical{height:50px;background-color:#999;-webkit-border-radius:8px;}
#doc ::-webkit-scrollbar-thumb:horizontal{width:50px;background-color:#999;-webkit-border-radius:8px;}
1、原型链/作用域链,闭包,沙箱,异步跨域,模块化、OOP、垃圾回收等问题
2、IE怪癖模式、inline-block兼容、常见inline元素及其区别、盒模型、reflow、常见浏览器内核等问题。
用jquer做假eloader 做欲加载
http://www86ccc-163-com.iteye.com/blog/1317066
ie6 css png 透明
background:url(../images/soilbg.png);
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="images/soilbg.png");
_background:none;
其实是一个透明度为90%的纯色背景,代码如下:
#header{
filter:progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#E518515F', endColorstr='#E518515F');
background:rgba(24, 81, 95, 0.9);
}
:root #header { filter:none; }
其中filter是IE的滤镜,background:rgba是CSS3属性,最后一句是针对IE9的。所以这段CSS是兼容所有浏览器的,可放心使用…
在我们看来,IE滤镜中的那些代码实在有点费解,在这里我也不多说其中的原理了。
提供一个代码生成页,可自动生成代码
扩展:
IE6双倍padding间距解决方案
另外:在ie6下浮动了的容器里使用margin-left或right,数值也是乘2倍增长。
padding属性在ie6下的hack!
在ie6下使用padding的话,数值乘2倍增长,其他浏览器不会!
方法一:可以用!important来调整!
.x{width:100px;height:100px;padding:50px!important;padding:25px;}
除了IE6以外,其他浏览器都支持!important关键字属性的优先!
你们以后做兼容性的时候注意,具体怎么做,参照上面的!
方法二:当有float的时候,可以在css中加上dispaly:inline,就不会出现IE6乘2倍增长。
IE6下 fiexd问题
IE6,7 在没有浮动或进行盒装的情况下(display:inline / float)会有双倍间距问题