【前端學習筆記】項目經驗積累（不定期更新）

標籤：前端

樣式重設—————————————————————————–

/* 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:12px; font-family:"微軟雅黑"; }    /* end reset */

清浮動——————————————————————————–

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

色彩坡形樣式—————————————————————————

.gradient{        width: 200px;        height: 200px;        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;    }    除了IE6-7 都相容

陰影設定——————————————————————————-

box-shadow: 2px(橫向右移) 3px(豎向下移) 2px(擴散寬度) #000(陰影顏色);

選項卡active問題———————————————————————–

把選項卡option分為 nav和con部分，把option、nav設定為relative， active的li多設定一個像素的高,再設定con為postion ，讓nav的z-index大於con的z-index，這樣active 的li多出的那個像素就會順利覆蓋con的邊框。這樣可以相容IE 6-7

IE6~7下浮動元素margin-bottom失效問題—————————————————–

<div class="clear">    <div id="div1"><div></div><div id="div2"></div>

clear為清浮動的div，這時如果給div1設定float:left;margin-bottom:10px,那麼在IE6下這個margin-bottom會失效解決方案:去掉margin，給該類浮動元素加一個包裹層，給包裹層設定padding

IE下p標籤line-height不識別inline-block——————————————————-

當p標籤裡有inline-block元素時，而且需要將這些元素垂直置中，應當去掉line-height 用padding

解決png在IE下不透明問題————————————————————————-

1.引DD_belatedPNG_0.0.8a.js檔案。2.在JS中調用：DD_belatedPNG.fix(‘*‘); ‘‘內是選擇符。3.加上<!--[if IE 6]> <![endif]-->只在IE6下運用。

解決IE6下雙邊距bug—————————————————

IE6下浮動元素在box中會使 margin-left margin-right加倍。解決方案：給該浮動元素加上inline-block

解決IE6下最小高度19像素問題————————————————————–

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

CSS小三角形製作————————————————————————————-

.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失效問題——————————————————-
IE6下一上一下兩個div，下面的div設定margin-top:-1,不能成功。
解決方案：給設定margin-top的元素加上position:relative;

———————————js(jQuery)——————————–

每個js模組的編寫————————————————————–

放在(function(){    })();裡，在方法塊裡的變數不與其他衝突，方便管理

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

【前端學習筆記】項目經驗積累（不定期更新）