"Front End Learning Notes" project experience accumulation (not regularly updated)

Style Reset ————————————————————————— –

/ * Reset * /    Body,H1,H2,H3,h4,h5,P,DL,DD,ul,ol,form,input,textarea,th,TD,Select {  margin:0;  padding:0; }    em {  font-style:normal; }    Li {  list-style:none; }    a {  text-decoration:none; }    img {  border:none;  vertical-align:top; }    Table {  border-collapse:collapse; }    input,textarea {  outline:none; }    textarea {  resize:none;  overflow:auto; }    Body {  font-size:px;  font-family:"Microsoft Jas Black"; }    / * End reset * /

Clear Floating —————————————————————————— –

.clear{zoom:1}    .clear:after{content:""; display:block; clear:both;}

Color Gradient Style —————————————————————————

. Gradient{ width: px ; height: px ; Border:1px solid #000  ; background: -webkit-linear-gradient (top, #ffffff, #f8f8f8)  ; background: -moz-linear-gradient (top, #ffffff, #f8f8f8)  ; background: -ms-linear-gradient (top, #ffffff, #f8f8f8)  ; background: linear-gradient (top, #ffffff, #f8f8f8)  ; --ms-filter:"Progid:DXImageTransform.Microsoft.gradient (gradienttype=0,startcolorstr=# ffffff,endcolorstr= #f8f8f8) " ;+background: #f8f8f8  ;}Apart fromie6-7are compatible

Shadow Settings ——————————————————————————-

box-shadow: 2px(横向右移) 3px(竖向下移) 2px(扩散宽度) #000(阴影颜色);

Tab Active Issue ——————————————————————— –

把选项卡option分为 nav和con部分，把option、nav设置为relative， active的li多设置一个像素的高,再设置con为postion ，让nav的z-index大于con的z-index，这样active 的li多出的那个像素就会顺利覆盖con的边框。这样可以兼容IE 6-7

————————————————— floating element Margin-bottom failure problem under ie6~7-

<divclass="clear">    <divid="div1"><div></div><divid="div2"></div>

clear为清浮动的div，这时如果给div1设置float:left;margin-bottom:10px,那么在IE6下这个margin-bottom会失效解决方法:去掉margin，给该类浮动元素加一个包裹层，给包裹层设置padding

IE under P tag line-height does not recognize Inline-block ——————————————————-

当p标签里有inline-block元素时，而且需要将这些元素垂直居中，应当去掉line-height 用padding

Solve the opacity problem of PNG under IE ————————————————————————-

1.引DD_belatedPNG_0.0.8a.js文件。2.在JS中调用：DD_belatedPNG.fix(‘*‘); ‘‘内是选择符。3.加上<!--[if IE 6]> <![endif]-->只在IE6下运用。

Solve the IE6 of the double-margin bug —————————————————

IE6下浮动元素在box中会使 margin-left margin-right加倍。解决方法：给该浮动元素加上inline-block

Solve the problem ———————————————————— the minimum height of 19 pixels under IE6 –

1.css里面加上overflow:hidden;2.div里面加上注释,<div><!– –></div>

CSS Small triangle making ————————————————————————————-

.triangle_up{width: 0px;height: 0px;            overflow:hidden;            border-left: 4px solid transparent;            border-right: 4px solid transparent;             border-bottom: 4px solid red;            _border-left: 4px solid #fff;            _border-right: 4px solid #fff;//IE6下transprent会默认黑色，所以要改成跟背景相同的颜色        }IE6 HACK:_ IE67 HACK:+

margin-top:-1px failure Problem ——————————————————-
IE6 Next up two Div, the following Div set margin-top:-1, cannot succeed.
Workaround: Add position:relative to the element setting margin-top;

——————————— JS (jQuery) —————————— –

Each JS module is written ———————————————————— –

放在(function(){    })();里，在方法块里的变量不与其他冲突，方便管理

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

"Front End Learning Notes" project experience accumulation (not regularly updated)