2. 程式人生 > >web前端工程師工作中遇到難以解決的問題

web前端工程師工作中遇到難以解決的問題

阿新 • • 發佈：2019-01-25 
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]-->即可！
2.在樣式裡寫#png-container{
width: 300px;
height: 150px;
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../imgs/logoB.png',sizingMethod='crop');border:1px solid red;display:block;
}到頁面中呼叫<div id="png-container ">
<img src="imgs/logoB.png" alt="" />
</div>注意圖片要儲存為png-8格式的才行！
3. 將背景圖片寫成style="_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../imgs/dialog/da_fr.png',sizingMethod='scale');background:url(../imgs/dialog/da_fr.png) no-repeat!important;_background: none transparent scroll repeat 0% 0%;);"即可。ff、ie7、ie6下都不會有灰色背景了,這個怎麼又失靈了，唉害得我糾結了好幾天！。
16）.表格自動換行
唉，最討厭表格了，可是編輯軟體平臺有很多報表要用到表格來寫，搞的我鬱悶半死，要想讓表格裡td的內容到了一定寬度自動換行就要先設一個全域性樣式table{table-layout:fixed;}
td{word-break: break-all; word-wrap:break-word;};              
17）.iframe高度自適應
給div加一個樣式style="position:relative;"
再給iframe 加一個樣式如下，只有把iframe定義成絕對定位後，才能自適應高度
style="position:absolute; height:100%;"
18）.ie8下input的bug
我滴個孩來！一個小的兩個input輸入框，一個是文字框，一個是按鈕，卻怎麼也接不到一起去，可把我給急壞了，這小問題花了我差不多一下午的時間，糾結半天終於給弄出來了，但不知原因，這麼寫就對了！
要定義input{ vertical-align:middle;}即可！
19）.按鈕的連結路徑
編寫網頁前臺時會碰到按鈕的連結路徑怎麼給的問題！只要在button里加個onclick="window.location.href='orderCheck.htm‘"即可！
<button type="button"onclick="window.location.href='orderCheck.htm'">Add toCart</button>
20）.圖片加alt好處
網頁中<img src=""alt=""/> 中的alt是很重要的，這涉及到網頁的親和力問題（http://www.yixieshi.com/ucd/9345.html），網頁中的圖片若是不加alt在圖片沒加載出來的時候會什麼資訊也看不到，加了alt則在載入不出來圖片的時候顯示圖片的資訊便於使用者檢視資訊！
21）.
去除chrome瀏覽器下input和textarea點選選中框
取消chrome下input和textarea的聚焦邊框：
input,button,select,textarea{outline:none}
取消chrome下textarea可拖動放大：
textarea{resize:none}
最後，寫在一起，重置input和textarea的預設樣式：
input,button,select,textarea{outline:none}
textarea{resize:none}
 
21）.頁面中流動條問題
開啟一個空白頁面，觀察瀏覽器右側，會發現IE瀏覽器會有一段滾動條的槽道，而Firefox瀏覽器下沒有。
22). 手機, Adroid2.2, 平板電腦, 瀏覽器, mobile safari
最近給平板電腦做頁面，經歷了一番探索，搞定了。
下面來說說我的解決方案。


測試裝置：
   GT-P1000 三星平板電腦（其實為大號手機）
   作業系統：android2.1
   瀏覽器：Mobile Safari/533.1
   User Agent列印結果：
       Mozilla/5.0 (Linux; U; Android 2.1;zh-cn; GT-P1000 Build/FROYO) AppleWebKit/533
.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1


1. 在jsp頁面頂上增加以下文件型別宣告：
Java程式碼 
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">       
<html xmlns="http://www.w3.org/1999/xhtml">  



      如果不加上文件型別宣告的話，在瀏覽器裡開啟頁面後，頁面會根據移動裝置螢幕的大小自動縮放頁面，並且當點選輸入框時，頁面會自動放大，特別難看。加上宣告之後，頁面會展現原始大小，手指也可以拖動螢幕進行頁面放大。

2. 普通的網頁字型大小，在移動裝置瀏覽器上看到的效果是字型變小
所以css的字型大小要做大一點。

我是研究了雅虎移動版的網站：
http://hk.m.yahoo.com/

23）.頁面中流動條問題
 
網頁中改變input輸入框的背景時，當輸入的文字超過一定數字時，背景圖片會跑，這時只要限定input的maxlength就行了！
 
24）.input在google瀏覽器下若用背景圖片寫並且點選上去有效果的話會掉下來
解決的辦法是將input裡的value=""中加一個空格！ 即寫成value=" "
25）.解決ff下面td的換行問題<tablestyle="table-layout:fixed" width="200">
<tr>
<td width="25%" style="word-break :break-all; overflow:hidden;">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="word-wrap :break-word; overflow:hidden;">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</table>
26)巧妙clearfix解決css浮動問題
如何用clear來解決css浮動問題，應該是眾多前端開發人員所關心的問題，是clear還是clearfix，其實我們最終一個目的就是讓浮動產生更多的影響，最為一個前端人員，我們有必要深入研究和探討...
萬能float閉合，得知很多朋友都在使用下面的通用解決辦法：
1.clear{clear:both;height:0;overflow:hidden;}
上訴辦法是在需要清除浮動的地方加個div.clear或者br.clear，我們知道這樣能解決基本清浮動問題。但是這種方法的最大缺陷就是改變了html結構，雖然只是加個div。
 
最優浮動閉合方案（這是我們推薦的）：
1.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
2.clearfix{*+height:1%;}
用法很簡單，在浮動元素的父雲素上新增class="clearfix"。你會發現這個辦法也有個弊端，但的確是小問題。改變css寫法就ok了：
1.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
2.clearfix{*+height:1%;}
以上寫法就避免了改變html結構，直接用css解決了。
很拉轟的浮動閉合辦法：
1.clearfix{overflow:auto;_height:1%}
這種辦法是我看國外的一篇文章得到的方案，測試了，百試不爽，真的很簡單，很給力。喜歡的同學也可以試試這個辦法。
 
這種方法是端友radom提供的，測試通過：
1.clearfix{overflow:hidden;_zoom:1;}
chrome下input[type=text]的placeholder不垂直居中的問題解決
line-height: normal;   
line-height: 22px\9;  
去掉超連結或按鈕點選時的虛框線
a,a:hover,input,button{outline:none;blur:expression_r(this.onFocus=this.blur());} input:active {outline:none;}input::-moz-focus-inner{border:0px}
 
修改select預設的樣式
select{background:none;width:400px;border:1pxsolid #d8d8d8;}
option{vertical-align: middle;}

相關推薦

web前端工程師工作中遇到難以解決的問題

1）.margin-top,margin-bottom不能正常顯示時 一.有時會遇到外層中的子層使用margin-top不管用的情況；這裡我們需要在子層的前後加上一個 div{height:0;overflow:hidden;} 例 CSS樣式表中： #box {ba

前端工程師工作中常見問題解決辦法(ios底部輸入框，a中download，ie11...)

window.open() 在 ajax 回撥中被阻止 由於安全限制，開啟新標籤的操作需由使用者直接觸發，使用程式觸發預設情況下會被阻止，因此把 winodw.open() 的程式碼放在事件處理函式中即可解決此問題。  固定在底部的輸入框，在 IOS 裝置上顯示的問題

Web前端工程師工作前 VS 工作後

工程師你還能想起工作前的愜意與瀟灑嗎？睡到自然醒那是不在話下，每天行程也安排的滿滿，吃喝玩樂手到擒來，可是工作後的你……算了，說多了都是眼淚，還是緬懷一下吧~~~http://www.icketang.com人生那麽短，何苦碌碌無為。雖然你還懷念工作前的美好憧憬，但又窮又閑的生活，再年輕又有何用。也許有的人說

web前端之網頁中幾種預設圖片的解決方式

現在網頁中圖片隨處可見，但避免不了有時會出現圖片資源失敗的情況，在谷歌瀏覽器中就會顯示這樣 這裡的alt屬性是為了當圖片載入失敗時告訴使用者圖片資訊的 能不能美化一下呢？ 下面給出幾種方式 js 方式 相信大家碰到這種問題是，搜尋的結果一般都是用圖片的onerror

web前端工程師具備經驗和知識點（持續更新中）

web前端工程師必備 1、瞭解 DNS 解析，充分利用 CDN，使用多個域名來完成資源的請求以縮短載入時間； 2、設定 HTTP Headers（Expires, Cache-Control, If-Modified-Since）； 3、遵循 Steve Souders 給出的全部規

北京房山web前端工程師，是工作難找還是你能力不夠

剛剛開啟知乎，發現有人提問：“前端現在怎麼這麼多人”，順便晒了自己的簡歷，大吐苦水抱怨自己的簡歷無人問津。   底下的人也應聲附和，三四年前還是jQuery 橫行的年代，服務端渲染頁面，JavaScript 處理互動，模組化和構建工具都是新鮮玩意兒，那個時候前端入門確實比較容易的。

如何成為一名優秀的Web前端工程師?

功能 des 更新 高性能 yahoo 建議 策劃 兼容 推薦 何為：前端工程師？ 前端工程師，也叫Web前端開發工程師。他是隨著web發展，細分出來的行業。Web前端開發技術主要包括三個要素：HTML、CSS和JavaScript！它要求前端開發工程師不僅要掌握基本的We

Web前端工程師要掌握的基礎知識和技能

原因 體驗 渲染 會有 溝通 瀏覽器 直接 post 領域 目前web產品交互越來越復雜，用戶使用體驗和網站前端性能優化這些都得靠web前端工程師去做,web前端工程師是設計加開發的綜合體，web前端工程師是在開發人員中最直接面向產品，面向用戶的設計人員，一個開發團隊的成果

Web前端工程師必備的六個技能！你都會麽？

服務器 events 網站 必須 處理 ie6 好的 異步 廣告 Web前端開發是從網頁制作演變而來的，名稱上有很明顯的時代特征。 　　2005年以後，互聯網進入Web 2.0時代，各種類似桌面軟件的Web應用大量湧現，網站的前端由此發生了翻天覆地的變化。網頁不再只是

一名優秀的web前端工程師需要做到哪幾點？

前端做什麽HTML5作為移動互聯網的主流前端開發語言，從根本上改變了開發商開發web應用的方式，不僅是PC端而且在移動端也得到了更廣泛的應用。HTML5已經成為web前端開發必不可少的語言，目前來說還沒有一個web前端語言能夠取代HTML5的位置。由於HTML5的興起，企業對於web前端工程師的需求也是越來越

Web前端工程師成長之路——知識匯總

val target avl media 影響 比較 知識 索引 成長之路 【轉】Web前端工程師成長之路——知識匯總 一、何為Web前端工程師？ 前端工程師，也叫Web前端開發工程師。他是隨著web發展，細分出來的行業。Web前端開發工程

踏上Web前端工程師道路的第一天。

前端工程師 方法 編寫 工程 學習方法 字母 前端工程 是否 信息 今天是學習前端的第一天，在老師的指導下和自己的一些自學，愉快的結束了一天的C#課程。 在前輩傳授的一些經驗中，使我記憶深刻的便是我現在處在一個信息知識爆炸的時代，隨時都有新的知識更新，讓我們在這個社會上得以

Web前端工程師修煉之道(原書第4版) 中文pdf掃描版

知識 實現簡單 div font web前端 圖形 如何工作 htm log 你是否也曾想過自己創建網頁，但卻苦於沒有經驗？那麽從現在開始學習吧！本書由淺入深地講解了Web設計的一些重要概念、基本原理，以及HTML、CSS和JavaScript的具體使用方法與技巧。當你

web前端工程師們都是如何創建HTML5頁面？

ado 這就是 技術 ESS 今天 分享圖片 例如 mage fff H5網頁設計，可以大大提高視覺吸引力，並能提供更高質量的視頻和音頻，頁面打開速度，視覺效果。滿足了企業所有平臺的網絡推廣需求，節省了企業的人力、物力和財力。但是H5頁面也有點技巧。今天，蕭邊告訴你如何為網

學習掌握了以下內容你就可以晉升高階web前端工程師行列了

一位好的Web前端開發工程師在知識體系上既要有廣度，又要有深度，所以很多大公司即使出高薪也很難招聘到理想的前端開發工程師。現在說的重點不在於講解技術，而是更側重於對技巧的講解。技術非黑即白，只有對和錯，而技巧則見仁見智。以前會Photoshop和Dreamweaver就可以製作網頁，現在只掌握這些已

Web前端工程師程式設計師必看書單附技術書閱讀方法論（附網盤下載連結）

轉載自某大佬部落格：https://pymlovelyq.github.io/2018/10/17/WebFont/ 前言：技術書閱讀方法論 一.速讀一遍（最好在1~2天內完成） 人的大腦記憶力有限，在一天內快速看完一本書會在大腦裡留下深刻印象，對於之後複習以及總結都

web前端部署過程中快取出現的問題 生產實戰經驗 移動端H5

目錄 增加時間戳 或者 版本號 chrome: provisional header are showed 漏掉的ng-include 手機各種機型 對快取的不同處理 (2018) – 移動端H5混合應用的新版本生產部署之後， 出現的各種情況和實

WEB前端工程師必會的基本技能

第一：HTML 這是最簡單和最基本的。要控制塊級元素：div、table、p、ul、li ... 內聯元素a、font、span ...等。這些標籤是最常用的頁面佈局，要精通其功能，要特別注意頁面佈局標籤之間的關係。 Html介紹： HTML是一種用於描述網頁的語言。 HTML指的是

web前端工程師高效率開發工具推薦

要說有哪些好用的前端開發軟體和工具，我可有發言權哈~因為在學習的過程中積累了不少實用型前端開發工具。今天我就從瀏覽器相容性測試工具、web開發工具、前端效能優化工具、大資料視覺化工具這四個方向來和大家共享下我的存貨，希望對大家的學習和工作有幫助~ 瀏覽器相容性測試工具 · Spoon Bro

web前端工程師教程大綱分享

學習web前端的同學越來越多，怎麼學，從哪裡開始學可能很多同學都摸不到頭腦，那麼今天就給大家分享web前端課程大綱給大家，相信有了這份web前端工程師教程大綱大家能更清晰的找到自己的學習路徑。 web前端學習課程分採用進階式學習，階段性檢測學員掌握學員學習情況。課程體系能夠適應市場需求、緊跟