⑴ web前端工程師工作中遇到難以解決的問題
1）.margin-top,margin-bottom不能正常顯示時
一.有時會遇到外層中的子層使用margin-top不管用的情況；這里我們需要在子層的前後加上一個
div{height:0;overflow:hidden;}
例
CSS樣式表中：
#box {background-color:#eee;}
#box p {margin-top: 20px;margin-bottom: 20px;text-align:center;}
解決方法：在P標簽前後各加2個空的div：<divstyle="height:0;overflow:hidden"></div>
二.網頁中頭部，中部，底部的居底部有時給個margin-bottom:10px;不管用也是要給個清除屬性的.clear{clear:both;font-size:0;line-height:0;}在底部<div id="footer"></div>下加個<div></div>
2）.div層中高度自適應問題
網頁前端科技人員在設計網頁時不可能知道客戶在要他們自己的網站內容頁里加多少文字或圖片內容
這時我們就不能規定div層的高度，為此應寫成min-height:200px;height:auto!important;height:
200px;overflow:visible;這樣ie7,ff,ie6瀏覽器的高度自適應問題就解決了，這些在
http://www.xueshengshu.com/網站中用到最多了。
3）.div層中子層的居底部對齊問題
div中的定位問題有很多也很麻煩，但弄懂了就OK了，在一個大的div層中如何讓子層的內容居底部
對齊就涉及到了position定位問題；
例
div層#box{position:relative;border:1px solidred;width:600px;hegiht:400px;}
div子層#box .wrap{position:absolute;bottom:0;border:1px dashedblue;width:200px;height:
100px},最近寫的網站中http://www.msgc.net.cn/就用到了
4）.div層中清除clear屬性的一小部分應用
在div中一個大的層裡面有很多子層，若是加上邊框在ie7、ie6中或許會正常顯示，但是在ff中可能
只會成一條線了，此時在最外層的後面加上<div style="clear:both"></div>或者設 .wrapfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}後在每個浮動外框調用wrapfix；http://www.xueshengshu.com學生書網里用到最多了。
5）.解決IE8下div移位、錯位等兼容性問題
在<head>標簽後面的第一句話加上<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />就OK了
6）.單行文字居中與字體樣式問題
在div中一個層中只有一行文字，要讓這層中的文字居中，可設line-height的高度和層的高度一樣，注意這一層中的文字不能換行，此外，設了line-height時再給定字體樣式font:bold 14px "宋體";這時要把font:bold 14px "宋體";放在line-height的前面，否則字體樣式不顯示文字也不居中；或者將font:bold 14px "宋體";改成font-size:16px;font-weight:bold;font-family:"宋體";就OK了。
7）.滑鼠滑上去的特殊效果
往往為了達到顯眼的效果，我們會寫到一些好看的效果，方法一在樣式表中寫：ul li a{border:1px solid red;}ul li a:hoverimg{filter:alpha(opacity=40在ul標簽中調用即可方法二：在樣式表中寫上：.hover img{filter:alpha(opacity=40);}在div中調用onmouseover="this.className='hover'"onmouseout="this.className=this.classtype"即可
8）.IE6中高度不對問題
今天在div中給定了高度為1px,其它瀏覽器顯示正常，可是ie6中顯示的高度就不對了，這時我給樣式表中加了個font-size:0px;line-height:0px;就好了
9）.ul在外框里margin-top不起作用的問題
在div大框子里用了ul作導航的時候為了合ul層居中顯示，設ul的樣式表為margin-top:-15px不起作用了，此時應該將div大框設定高度後給個line-height與height一樣的高度，ul層就自動居中了。
例如http://www.hopes-home.cn/main.aspx
10）.ff中margin-top有時不起作用的問題
今天頭暈腦漲的把這問題給解決了，這幾天寫標網都有累似問題，可是一直都是換個寫法解決的，今天的這個辦法也不只可行試試還是可以的，在一個div外框層中給個寬度例如，#div_wrap{width:280px;height:100%;}
其次在這個框子里設一個.div_top{widh:100%;font:bold12px "宋體";height:24px;line-height:24px;}
.div_center{border:1px solid#dbdbdb;border-top:none;background:#fff;min-height:460px !important;height:auto!important;height:460px;overflow:visible;}
最後在這個div_center里套個ul li時經常會在ff中出問題，也就是在div_top與div_center中莫名的多了幾個像素的空格，這時給ul樣式表設個display:inline-table即可；
11）.list-style-image的用法
div中經常用到新聞列表前面有圖標的樣式，有兩種簡單的方法
一.可以寫成ul.menu{width:100%;} ul.menuli{background:url(em_img/small_icon.jpg) 5px center no-repeat;list-style-position:inside;padding-left:18px;}即可在各瀏覽器正常顯示
二. 可以設ul.menu{width:80%;} ul.menuli{list-style-image:url(em_img/small_icon.jpg); }
此時新聞列表前的小圖標即可在ie6，ie7，ie8,ff中都正常顯示但，ie6需要不斷的刷新才能正常顯示小圖標；
12）.
IE6 li:hover兼容問題
<scripttype="text/javascript"><!--//--><![CDATA[//><!--
sfHover =function() {
var sfEls = document.getElementById("nav").getElementsByTagName_r("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!］>
</script>
13）.ie6下支持position:absolute;
最近寫一個簡訊平台的頁面用到的底部固定的層，在ff和ie7,ie8下都是好的，可到ie6下就不行了，轉了整個地球終於出來了：
background-attachment:fixed; }
#bottomNav {background-color:#096; z-index:999; position:fixed; bottom:0; left:0;width:100%; _position:absolute;
_top: expression_r(documentElement.scrollTop+ documentElement.clientHeight-this.offsetHeight); overflow:visible; }
樣式表中調用即可！詳細請見「高度自適應屏幕尺寸！」
14）.border:none;與border:0;的區別
1.性能差異
【border:0;】把border設為「0」像素雖然在頁面上看不見，但按border默認值理解，瀏覽器依然對border-width/border-color進行了渲染，即已經佔用了內存值。
【border:none;】把border設為「none」即沒有，瀏覽器解析「none」時將不作出渲染動作，即不會消耗內存值。
2.兼容性差異
兼容性差異只針對瀏覽器IE6、IE7與標簽button、input而言，在win、win7、vista 的XP主題下均會出現此情況。
【border:none;】當border為「none」時似乎對IE6/7無效邊框依然存在
【border:0;】當border為「0」時，感覺比「none」更有效，所有瀏覽器都一致把邊框隱藏
總結：
1. 對比border:0;與border:none;之間的區別在於有渲染和沒渲染，感覺他們和display:none;與visibility:hidden;的關系類似，而對於border屬性的渲染性能對比暫時沒找測試的方法，雖然認為他們存在渲染性能上的差異但也只能說是理論上。
2. 如何讓border:none;實現全兼容？只需要在同一選擇符上添加背景屬性即可
對於border:0;與border:none;個人更向於使用,border:none;，因為border:none;畢竟在性能消耗沒有爭議，而且兼容性可用背景屬性解決不足以成為障礙。
15）.ie下。png的圖片不會有灰色背景出現
註：首推PNG8，即使在IE6中它的透明背景也能被正確顯示。PNG8使用的技巧是，輸出時把「雜邊」設置為和背景接近的顏色
1.幾經周折終於把ie6下.png有色圖問題解決了，原來IE6.0原本支持png8的索引色透明度，但不支持png或8位以上的alpha 透明度，在IE6.0下，非PNG8格式的透明圖片部分，會顯示為淡淡的灰綠色。在網頁中頭部加個代碼<!--[if IE 6]>
<script type="text/javascript" src="http://zmingcx.com/wp-content/themes/HotNewspro/js/pngfix.js"></script>
<script src="js/DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('.png_bg');
</script>
<![endif]-->即可！
⑵ 前端圖片處理
我的理解應該是生成圖片的時候，在不影響圖片質量的情況下，盡量用體積小的格式，比如在不透明的情況下盡量把圖片保存成png格式。
在css中有一種技術叫做圖片精靈，就是把一些背景圖做成集合的形式。圖片只需載入一次。
最後網上好像是有插件（瀏覽器也有插件）可以對圖片進行壓縮處理。
⑶ 網站後台編輯圖片在前端模糊，如何處理
製作圖片的時候將圖片的尺寸做大一些，
或者將圖片的清晰度調高一些就行了
上傳圖片的時候圖片會被壓縮
所以導致圖片不清晰
因此盡量使用大圖
⑷ web前端開發圖片放大了不清晰
web前端開發圖片放大了不清晰，需要優化瀏覽器的縮放演算法
在網頁上通過CSS樣式對圖片進行縮放從而導致圖片模糊，究其原因是因為瀏覽器的縮放演算法和圖片處理軟體的不同導致的差異。
所以，要解決這個問題，就需要優化瀏覽器的縮放演算法。CSS屬性image，rendering正是為此而存在的。CSS 屬性用於設置圖像縮放演算法。它適用於元素本身，適用於元素其他屬性中的圖像，也應用於子元素。
⑸ 前端開發中，對圖片的優化技巧有哪些
階段一、圖片從PS中出來的時候：
1、大圖jpg，保存為連續模式。可以有模糊漸顯的效果。普通的是掃描列印效果。
2、小圖icon，http1.x伺服器的話整在一起導出。http2.0伺服器就無所謂了，可單個保存。
3、部分不適合與2切在一起的小圖片，使用base64編碼字元串代替。
階段二、圖片在代碼中使用的時候：
1、圖片保存在額外CDN伺服器。可節省代碼伺服器空間，加快圖片訪問。
2.1、在圖片即將進入到視野范圍內時再載入，可節省流量，加快首屏展示。
2.2、在網路空閑的時候預載入後續的圖片可以讓用戶等待時間更少。
3、考慮SEO的話，非內容的圖片使用背景代替？
4、好的圖片CDN自帶圖像處理功能，諸如裁剪壓縮之類的功能，可以上傳一張大圖，使用帶有不同參數的url來在不同的場景中使用圖片。
階段三、項目上線
1、盡量不要讓圖片鏈接失效好了
⑹ web前端圖片處理。請求大神。。。。。。
如果你說的是我理解的，用css就可以實現
手機打字不方便，給你看看以前回答別人相似的問題
http://..com/question/170087636.html?oldq=1
也就是說該鏈接寬度和 圖片中第一個圖標寬度相同，然後通過背景圖方式載入成為默認樣式。再通過:hover 改變同一個背景圖的x軸位置就可以實現
仍有問題的話追問吧
⑺ HTML中將一張圖片蒙上一層灰色
請問要蒙上什麼樣的一層灰色？
1. boson說的 opacity 是控制元素的透明度，filter的寫法是IE適用，
還可以寫成 opacity:0.7 ，兼容Chrome
2. 如果是需要一層半透明黑灰色，擋著圖片，你需要弄一個position: absolute; background:#000; opacity:.7; 的div遮擋，注意寬度高度，和位置
3. 如果是想讓圖片變成黑白色，需要 filter: grayscale(100%); ，具體可以自行搜索
⑻ 前端代碼網頁背景圖閃一下就沒了
圖片載入方式出現問題。
圖片載入的兩種方式，BaselineJPEG(基準式)ProgressiveJPEG(漸進式)基準型載入這種類型的文件存儲方式是按從上到下的掃描方式，打開這個文件顯示它的內容時，數據將按照存儲時的順序從上到下一行一行的被顯示出來，直到所有的數據都被讀完，就完成了整張圖片的顯示。放到瀏覽器里就是這樣我遇到的這種情況了，雖然圖片很快就載入完成了，但是有一點小小的延遲，就會導致閃白。漸進式載入這種文件包含多次掃描，會先顯示整個圖片的模糊輪廓，隨著掃描次數的增加，圖片變得越來越清晰。
將背景圖片的載入格式轉換成漸進式載入即可。PS轉換將圖片放入ps中重新到出，到處是選擇漸進式載入格式即可。代碼轉換就該個格式用ps還是有點麻煩，用代碼直接修改還是更適合我們。無法通過原生控制選擇圖片的數量，如果需要做圖片數量的控制，需要選擇完圖片後，在input的onchange中監聽文件的數量進行判斷。建議，在選擇上傳的按鈕附近加上明顯的提示，告知用戶最多上傳的圖片數量。至於上傳超過數量時邏輯，可以自行根據業務場景決定，是上傳上限內的前幾張圖片，或是全部都不上傳，在APP端嵌入H5頁面，使用input原生上傳方案時，在選擇圖片時是使用APP做的選擇圖片功能，即選擇圖片的上限可能會受APP端的限制。