1.滑鼠移上去是出現一個window的儲存收藏列印的那個小框框,能不能限制它的出現?
在HEAD中加入
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
2. 圖片上用新屬性galleryimg
<img width=500 height=500 src=a.gif galleryimg="no">
3.div實現捲軸 (某些情況下可以替代iframe)
<style>
.gb { overflow:auto; white-space:normal; height:100px; padding:3px;}
</style>
<div class="gb"></div>
其中高度height和overflow是必須設定的!
ps:在IE下有的時候水平捲軸會出來,但是事實上,水平捲軸不沒有實際的用途,貌似這個是IE的bug,解決方案:overflow-x: hidden
加上這個.把水平捲軸隱藏掉~
4.用css來實現三角形
HTML代碼
<style>
.t{
width:50px;
border-style:solid;
border-color:#a6a2f7 #fff;
border-width:0 50px 50px 50px;
}
</style>
<span class="t"></span>
5. 用vml來畫圓角...
HTML代碼
<html xmlns:v>
<head>
<style>
v\:* {behavior: url(#default#VML);}
#lone {
width:200;
height:70px;
}
</style>
</head>
<body>
<v:RoundRect id="lone" strokecolor="#000" strokeweight="4px" arcsize="0.8" fillcolor="#ff0000">
<!--arcsize 弧度值 fillcolor 圓的填充色 strokecolor 圓的邊框色 strokeweight 邊框大小-->
</body>
</html>
6 . IE下,當使用了FLOAT之後.用margin-left和margin-right 會變成用雙倍的數值,例子:
margin-left:10px; 實際的效果是20PX;
解決的方法:(1),用display:inline;(2)用clear:float
方法1適應的範圍比較廣一些,(2)的話.只適合那些可以清除浮動的元素.不能清除的,不能用~
7.在mozilla firefox和IE中的BOX模型解釋不一致導致相差2px解決方案:
div{margin:30px!important;margin:28px;}
注意這兩個margin的順序一定不能寫反,據阿捷的說法!important這個屬性IE不能識別,但別的瀏覽器可以識別。所以在IE下其實解釋成這樣:
div{maring:30px;margin:28px}
重複定義的話按照最後一個來執行,所以不可以唯寫margin:XXpx!important;
8.IE5和IE6的BOX解釋不一致IE5下
div{width:300px;margin:0 10px 0 10px;}
div的寬度會被解釋為300px-10px(右填充)-10px(左填充)最終div的寬度為280px,而在IE6和其他瀏覽器上寬度則是以300px+10px(右填充)+10px(左填充)=320px來計算的。這時我們可以做如下修改:
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
這個/**/是IE5和firefox都支援但IE6不支援.
9.ul標籤在Mozilla中預設是有padding值的,而在IE中只有margin有值所以先定義
ul{margin:0;padding:0;}
10.關於指令碼,在xhtml1.1中不支援language屬性,只需要把代碼改為
<script type="text/javascript">
11.JS 的頁面跳轉指令碼
HTML代碼
<script language="javascript">
location.assign ("<a href="HTTP://www.jzxue.com" target="_blank">HTTP://www.jzxue.com</a>")
</script>
12. IE下用JS去掉所有連結和圖片的焦點(因點擊而產生的虛線框)
function bluring(){
if(event.srcElement.tagName=="A"||event.srcElement.tagName=="IMG") document.body.focus();
}
document.onfocusin=bluring;
</script>
13. 屏蔽右鍵類的代碼
<body oncontextmenu="return false">
14。div+css布局用了float之後背景不能延伸的解決方案
<div style="clear: both; font-size: 0;"></div>
原因:背景的自適應高度並不繼承float的高度,背景會繼承float底線所在容器中的位置高度,所以背景一定會找到最後一個標籤去測定,這樣我們在如上的標籤,這個標籤中什麼也不放。也就是一個沒有高度的空容器,這樣它就可以把背影拉下來了。
15.用JS來處理圖片變形的問題,等比例縮放圖片,還能防止圖片在載入過程中因為圖片太大而引起的變形
<script language="JavaScript" type="text/javascript">
<!--
function DrawImage(ImgD,FitWidth,FitHeight){
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
if(image.width/image.height>= FitWidth/FitHeight){
if(image.width>FitWidth){
ImgD.width=FitWidth;
ImgD.height=(image.height*FitWidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
} else{
if(image.height>FitHeight){
ImgD.height=FitHeight;
ImgD.width=(image.width*FitHeight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
}
//-->
</script>
應用:
<img src="XXXX" alt="自動縮放後的效果" width="200" height="200" onload="javascript:DrawImage(this,"200","200");" />
這裡給圖片設定了固定的大小。用了JS函數之後,不影響效果:)
16.用 CSS 實現 Firefox 和 IE 都支援的 Alpha 透明效果
filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5; /* Moz + FF */
opacity: 0.5; /* 支援CSS3的瀏覽器(FF 1.5也支援)*/
IE使用私人屬性filter:alpha(opacity),Moz Family使用私人屬性-moz-opacity,而標準的屬性是opacity(CSS 3, Moz Family部分支援CSS3)。後面的數值是透明度,使用百分比或者小數。
17.未知大小的圖片在一個已知大小容器中的水平和垂直置中
這個水平和垂直置中的例子能正常工作在IE5.x, IE6, IE7, Firefox, Opera, Mozilla, Netscape,為IE和非IE分別寫了二套簡單的樣式。
IE使用inline-blocks,非IE使用table-cell and vertical-align。
CSS
/* for non-IE browsers */
div.holder {width:750px; height:300px; background:#f8f8f8;
border:1px solid #777; text-align:center; display:table-cell; vertical-align:middle;}
}
18 .在IE裡面元素浮動之後.原來的邊距(margin)會加倍,但是FF等就不會.解決方案
在浮動的元素的代碼中加入:display: inline;,可使浮動被忽略,IE中不至於產生雙倍距離.
19. 首頁下沉的效果:
.post-body:first-letter {font-size:2.5em; float:left; padding:0 2px 0 0; line-height:1em; font-family:"楷體_GB2312"; font-weight:bold; color:#b00;}
20.半透明的效果
HTML代碼
<div style="width:100px;height:100px;background-color:#f00;filter:alpha(opacity=50); /* IE */ ; -moz-opacity:0.5; /* Moz + FF */ ; opacity: 0.5; /* 支援CSS3的瀏覽器(FF 1.5也支援)*/">我在任何瀏覽器裡都是半透明的
</div>
轉:http://mb.5151doc.com/wzsj/ShowArticle.asp?ArticleID=103