DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> DIV+CSS網頁設計布局中常見問題
DIV+CSS網頁設計布局中常見問題
編輯:CSS詳解     

1、IE6的雙倍邊距BUG:
display:inline
2、IE6下為什麼圖片下方有空隙產生:
解決這個BUG的方法也有很多,可以是改變Html的排版,或者定義img 為display:block或者定義vertical-align屬性值為vertical-align:top | bottom |middle|text-bottom 還可以設置父容器的字體大小為零,font-size:0
3、LI中內容超過長度後以省略號顯示的方法:
width:200px;white-space:nowrap;text-overflow:ellipsis; -o-text-overflow:ellipsis; 
overflow: hidden (適用於IE與OP游覽器)
4、web標准中定義id與class有什麼區別嗎
一.web標准中是不容許重復ID的,比如 div id="aa" 一個頁面中不容許重復2次,而class 定義的是類,理論上可以無限重復的, 這樣需要多次引用的定義便可以使用他.class還可以同時引用多個類,不同的類之間用空格隔開.
二.屬性的優先級問題,ID 的優先級要高於class,看上面的例子
三.方便JS等客戶端腳本,如果在頁面中要對某個對象進行腳本操作,那麼可以給他定義一個ID,否則只能利用遍歷頁面元素加上指定特定屬性來找到它,這是相對浪費時間資源,遠遠不如一個ID來得簡單.
5、垂直居中文本
設置高與行高一樣就可以了
6、如何對齊文本與文本輸入筐
設置文本框的 vertical-align:middle 
7、FF下文本無法撐開容器的高度
標准浏覽器中固定高度值的容器是不會象IE6裡那樣被撐開的,那我又想固定高度,又想能被撐開需要怎樣設置呢?辦法就是去掉height設置min-height:200px; 這裡為了照顧不認識min-height的IE6 可以這樣定義:{height:auto!important;height:200px;min-height:200px;}
8、web標准中IE無法設置滾動條顏色了
body {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
} 將body換成Html
9、定義1px左右高度
解決方法有很多:overflow:hidden | zoom:0.08 | line-height:1px
10、使一個層垂直居中於浏覽器中
div { position:absolute; top:50%; left:50%; margin:-100px 0 0 -100px; width:200px; height:200px; border:1px solid red; }(使用百分比絕對定位,與外補丁負值的方法,負值的大小為其自身寬度高度除以二)

11、加入收藏夾代碼
<script type="text/Javascript">
// <![CDATA[
function bookmark(){
var title=document.title
var url=document.location.href
if (window.sidebar) window.sidebar.addPanel(title, url,"");
else if( window.Opera && window.print ){
var mbm = document.createElement('a');
mbm.setAttribute('rel','sidebar');
mbm.setAttribute('href',url);
mbm.setAttribute('title',title);
mbm.click();}
else if( document.all ) window.external.AddFavorite( url, title);
}
// ]]>
</script>
<a href="Javascript:bookmark()">加入收藏夾</a>(在IE6-7. FF2.0 OP9.0中測試通過)

12、復制到系統剪貼板之IE,ff兼容版
<script type="text/Javascript">
// <![CDATA[
function copy_clip(copy){
if (window.clipboardData){
window.clipboardData.setData("Text", copy);}
else if (window.Netscape){
netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
if (!clip) return;
var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
if (!trans) return;
trans.addDataFlavor('text/unicode');
var str = new Object();
var len = new Object();
var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
var copytext=copy;
str.data=copytext;
trans.setTransferData("text/unicode",str,copytext.length*2);
var clipid=Components.interfaces.nsIClipboard;
if (!clip) return false;
clip.setData(trans,null,clipid.kGlobalClipboard);}
alert("已復制"+copy)
return false;
}
// ]]>
</script>
<h1>請另存代碼測試</h1>
<input type="text" id="ff" value=http://www.Javaweb.cc/ /><button onclick="copy_clip(document.getElementById('ff').value)">復制
</button>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved