CSS那些事(个人笔记)

由于开发项目中遇到很多 让人头疼的兼容，和不同浏览器之间的问题， 所以写了一些备忘强化对笔记， 如果各位有碰到的可以参考参考。

 

-----------------------------------------------------------------------------------

 

 随后我会分享几个项目中用到的功能组件，  日历预订（价格、订购）、动态验证、轮播图

 

只为提升自我水平和更多粉丝 .......哈哈！..   

 

------------------------------------------------------------------------------------

 

 

 

 子级元素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)会有双倍间距问题