前端開發中遇到的問題2

1.ie下背景圖片鋪滿全屏解決方法:

問題:設置background:cover,chrome,ff,ie9+正常,ie9兼容模式(推測是ie7)及ie8兩邊有留白
解決:放棄在body上設置背景圖片,在html上加一個div專門放背景圖片

<div id="div1"><img src="./images/content_bg.png" /></div>
css:
div#div1{
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
z-index:-1;
}
div#div1 > img {
height:100%;
width:100%;
border:0;
}

2.導航二級菜單的顯示隱藏問題

--現象:鼠標hover,二級菜單顯示,鼠標移出一級菜單,二級菜單就消失,可是咱們須要鼠標hover二級菜單上時二級菜單不消失.
--緣由:二級菜單對象不是一級菜單的子元素,是獨立於一級菜單的,這樣鼠標hover一級菜單,移出後二級菜單就消失沒法點擊.
--解決方法:1.將一級,二級菜單元素用span包裹,在span上添加事件
　　　　　 2.在二級菜單對象上再添加了一個事件,顯示自身.
--總結:解決問題最關鍵的是用e.target來跟蹤鼠標的即時位置

$(function(){
//二級菜單顯示
var objShowMenu = null;
$(".second_menu ul").hide();
$(".left_menu li").not(':first').each(function(){
$(this).hover(function(){
$(".second_menu").show();
$(".second_menu").css("background","#f9fafc");
$(".second_menu ul").css("display","none");
var index = $( ".left_menu li" ).index($(this)[0]);
$(".second_menu ul").eq(index-1).show();
objShowMenu = $(".second_menu ul").eq(index-1);
console.log("in of left_menu li");
}, function(e){
//$(".second_menu ul").hide();
$(".second_menu").css("display","none");

});
});
$(".second_menu").hover(function(){
$(".second_menu").css("display","block");
objShowMenu.show();
},function(){
//$(".second_menu ul").hide();
$(this).hide();
})
});
$(document).mouseover(function(e){
console.log("mouse over at :");
console.log(e.target);});

 

3.讓div,li等元素超出部分文字用省略號…顯示

display:block;
white-space:nowrap; 
overflow:hidden; 
text-overflow:ellipsis;

鼠標hover顯示所有,能夠用overflow:visible,也能夠在元素標籤上(通常是a標籤)加上title屬性

4.ie下絕對定位z-index失效bug

(親自踩的坑,百度了好久,才摸索到問題,淚...)
在製做左側菜單hover顯示隱藏時,由於菜單是放在banner上方,banner以及菜單都用到了絕對定位,由於我設置了菜單優先級高於banner,可是菜單在ie下居然未顯示被banner遮擋,好像z-index並無效果,經網上查詢,發現好像ie中子元素的優先級z-index要取決於其父元素的優先級的高低,我把父元素的z-index設置高,果然有效.
可是使用絕對定位徹底脫離了文檔流,後面的元素會飛上去,因此絕對定位慎用.

5.製做小箭頭的方法

<li class="arrow">◇</li>
.arrow{
overflow: hidden;
width:6px;/*尺寸這些能夠微調*/
height:26px;
/*border:1px solid red;*/
font-size: 22px;
text-align: center;
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation:2);/*兼容ie*/
transform: rotate(180deg);
}

ie旋轉濾鏡Matrix
語法:filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=i)
其中i取0，1，2，3，分別表明旋轉90度、180度、270度、360度。
45度這些要用到濾鏡matrix
filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.707,M12=m12,M21=m21,M22=m22,sizingMethod="auto expand");

6.ie實現盒陰影濾鏡

-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;

/* For IE 8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

 

7.把ul,li列表去掉,換成div包裹a標籤,另在a後面加一個span,能夠解決a標籤內文字超出容器寬度自動換行的問題

8.一些動態加載的數據,像以li的a展現的,要考慮到寬度問題
寬度固定,內容超出不換行,顯示爲省略號
爲a加上css

.topic a{
display: inline-block;
width:160px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

9.輪播問題解決,fadeOut(0),$(".banner_ul li:gt(0)").hide(),換成hide()

緣由:jquery低版本不支持fadeOut(0),能夠換成hide(),我用的是jquery.1.11.3.min.js;

10.html5 placeholder的字體顏色設置

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
color: #666; 
} 
input:-moz-placeholder, textarea:-moz-placeholder { 
color: #666; 
} 
input::-moz-placeholder, textarea::-moz-placeholder { 
color: #666; 
} 
input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
color: #666; 
}

 

11.css3設置背景顏色漸變
- webkit瀏覽器: background:-webkit-gradient(linear, 0 100%, 100% 100%, from(#1cc3f7), to(#55dbf4));從左向右橫向漸變
- mozilla瀏覽器
background:-moz-linear-gradient( left, red,blue);
若是爲top,是豎向漸變
-ie瀏覽器:(不須要寫background)
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=red,endColorstr=blue,gradientType=1);
0 表明豎向漸變 1 表明橫向漸變

12.命令行基本操做

  1.返回根目錄 cd \
  2.返回上一級 cd..
  3.進入下一層 cd目錄名
  4.改變當前驅動器目錄,進入d盤,d:
  5.若是當前目錄是C:\Documents and Settings 要切換到 d:\soft 在命令行輸入cd d:\soft回車後再輸入d:

13.ul的li浮動每行2個顯示,裏面有高度不一的圖片,li會出現換行即一排只能顯示1個的狀況
緣由:li的float致使,給li設置display:inline;或者display:inline-block;給img設置vertical-align:top

14.價格上的刪除線
text-decoration:line-through;

15.段落排版
--縮進
p{text-indent:2em;}
--中文字間距
p{letter-spacing:50px;}
--單詞間距
p{word-spacing:50px;}
16.css規範
 --css命名class通常以連字符-
--不要把css樣式用做js的鉤子,能夠寫一個js專用的class,以js爲前綴
--避免過度修飾選擇器,將影響性能
--全部組件都不要聲明寬度，而由其親元素或格柵系統來決定。

--堅定不要聲明高度。高度應當僅僅用於尺寸已經固定的東西，例如圖片和 CSS Sprite。在 p，ul，div 等元素上不該當聲明高度。若是須要的話能夠寫 line-height，這個更加靈活。
--css簡寫應當謹慎使用

17.grunt安裝步驟

- 1.全局安裝grunt-cli:npm install grunt-cli -g
- 2.進入項目根目錄後安裝本地grunt:npm install grunt --save-dev
- 3.在項目根目錄下運行grunt命令,能夠運行grunt -v查看版本
問題:安裝以後運行grunt後提示:"grunt' 不是內部或外部命令，也不是可運行的程序"
緣由:沒有全局安裝,直接本地安裝;設置環境變量也沒用,若是正確安裝,設置全局變量能夠不用必定在項目根目錄下運行

 oooO ↘┏━┓ ↙ Oooo  ( 踩)→┃你┃ ←(死 )   \ ( →┃√┃ ← ) / 　 \_)↗┗━┛ ↖(_/