您現在的位置是:電腦技術吧?>? 故障問題 ??>??css瀏覽器兼容,css與瀏覽器兼容的問題??>??正文詳情

css瀏覽器兼容,css與瀏覽器兼容的問題

景嘉怡2019-11-11 13:20:32 人圍觀
簡介css瀏覽器兼容前綴為了解決CSS的瀏覽器兼容性問題,多年的裁剪工作總結:)/*統一了每個瀏覽器下的邊距和填充的默認值*/HTML、body、a、H1、H2、H3、H4、H5、H6css兼容瀏覽器寫法

解決CSS的瀏覽器兼容性問題,多年切圖工作的總結:)  /* 統一各個瀏覽器下 外邊距margin、內填充padding的默認值 */  html,body,a,h1,h2,h3,h4,h5,h6,p,div,ul,li,ol,dl,dt,dd,img,form,input,textarea,select,fieldset { margin:0px; padding:0px }  /* 統一標題公共樣式 text-shadow:gray 0px 0px 5px; 文字陰影 font-weight:800 平滑的加粗 */  h1,h2,h3,h4,h5,h6,b,strong { font-family:Arial,Verdana,sans-serif; font-weight:800 }  /* 網頁公用的屬性: 字體、文字顏色、背景色等 */  body,table,input,select,textarea { font-family:SimSun, 宋體, Arial; font-size:12px; }  body, table { background-color:white }  body { color:#636363; font-size:12px }  /* 控制英文字符連續自動換行 */  div,span,th,td,dt,dd,h1,h2,h3,h4,h5,h6,em,strong,i,a,b,a,p { word-break:break-all; word-wrap:break-word; }  ul,ol,dl { list-style-type:none }  select,input,select { vertical-align:middle }  img { border:0 none; text-align:absmiddle; background-color:transparent }  /* 表格居中顯示 */  table { margin-left:auto; margin-right:auto; border-width:0 none }  /* 默認鏈接的樣式設置 */  a { color:#000; text-decoration:none }  a:hover { text-decoration:underline }  /* 去a虛線框 cdl: clear dotted line */  .cdl, a:active { outline:none; blr:expression(this.onFocus=this.blur()) }  :focus { outline:none } /* for Firefox */  /* 清浮動 */  .clear { display:block !important; clear:both; height:0px; line-height:0px; font-size:0 }  /* 常用,采用單詞首字母縮寫方式命名:保持良好的命名風格很重要 :) */  .tdn { text-decoration:none } /* 鏈接無下劃線 */  .ofh { overflow:hidden } /* 溢出隱藏 */  .tal { text-align:left } /* 內容左對齊 */  .tar { text-align:right } /* 內容右對齊 */  .tac { text-align:center } /* 內容居中 */  .fl { float:left } /* 左浮動 */  .fr { float:right } /* 右浮動 */  .m0a { margin:0 auto } /* 容器內水平居中 */  .bn { border:0 none !important; } /* 無邊框 */  3、技巧積累(持續補充...)  1)利用 margin: 0 auto; 實現水平居中,必須同時定義容器的寬度(width)才會有效果;  2)關于Border的寫法,如果您想定義div的四個邊的顏色不同,而粗細和樣式都一樣,您可以這樣寫:  div.border2 { border:1px solid; border-color:color1 color2 color3 color4 }  四種顏色依次是上,右,下,左的顏色  3)兼容所有的瀏覽器都可以顯示半透明效果的寫法  .alpha50 {  filter: alpha(opacity=50); /* 支持 IE 瀏覽器 */  -moz-opacity: 0.5; /* 支持 FireFox 瀏覽器 */  opacity: 0.5; /* CSS標準.該屬性支持firefox, Safari和 Opera */  }  4)使用media指令引入兩種CSS:打印版本的css和屏幕顯示的css  5)我們可以使用page-break-after,page-break-before控制打印時的分頁  6)使用縮進(text-indent)顯示圖片,而隱藏文字(對SEO友好)  .logo { background: url(xxx.gif) no-repeat; width:160px; height:60px; text-indent: -2000px; }   h1 class=logo 在售產品 / h1   7)100%的高度  為了讓 div id=content /div 容器自動延伸到整個頁面的高度,我們需要告訴和容器高度應為整個頁面的高度。

  html { min-height: 100%; _height:100%; }  body { margin: 0; padding: 0; min-height: 100%; _height:100%; }  #content { padding: 0 20px 0 20px; margin: auto; font: 1.5em arial, verdana; width: 960px; min-height: 100%; _height:100%; }  8)跨瀏覽器的盒陰影效果實例頁面  .shadow {  -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');  }  9)哀悼日網站灰化CSS代碼  html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}

版權聲明:本文由 景嘉怡 整理編輯。

原標題:css兼容IE瀏覽器,瀏覽器css3兼容

轉載注明出處:http://www.dn9ww09s.icu/fault/11708.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 電腦網絡連接不上,電腦怎么連接網絡

    電腦網絡連接不上,電腦怎么連接網絡 相關圖片臺式電腦怎么連接網絡親愛的朋友們,我相信你們在使用手機和電腦的過程中會遇到這樣的情況。為了滿足您的需要,請通過數據線連接移動電話和計算機。很顯然,它們已經連接在一...

  • 沒有電腦基礎能學會嗎,零基礎學java要學多久能學會

    沒有電腦基礎能學會嗎,零基礎學java要學多久能學會 相關圖片零基礎學游泳多久能學會今年,無論是在視覺、用戶界面還是交互方面,全堆棧設計都變得越來越流行。因此,我想給一些沒有編程基礎的設計師介紹一些簡單易懂的入門教程,比如@谷...

  • linux刪除多個文件夾,刪除文件夾linux

    linux刪除多個文件夾,刪除文件夾linux 相關圖片linux復制文件夾一些好學的用戶會操作linux軟件程序。在操作Linux的過程中,有時需要刪除一個文件夾。它們經常提示此文件不是空的并且不能刪除。對于新用戶來說,這無疑是一個巨l...

  • 電腦連接藍牙,電腦如何連接藍牙

    電腦連接藍牙,電腦如何連接藍牙 相關圖片電腦的藍牙在哪里打開當我們想把手機的文件數據輸入電腦,而數據線不在身邊時,我們該怎么辦?通過第三方軟件,我們覺得流量被浪費了。這時,我們可以用移動藍牙連接電腦,那...

  • 中文字體的英文,幼圓字體英文

    中文字體的英文,幼圓字體英文 相關圖片上面英文下面中文的字體當在CSS文件中使用中文字體時,如果寫中文,在IE6下可能無法識別某些樣式,因此最好不要在CSS文件中使用中文,包括這里的注釋是對應于中文字體的英文書寫...

  • 外星人筆記本沒聲音了,外星人筆記本聲音

    外星人筆記本沒聲音了,外星人筆記本聲音 相關圖片外星人筆記本鍵盤怎么調聲音在使用筆記本電腦的過程中,不可避免地會發生一些事故,這將影響到用戶的體驗。因此,有些用戶心情不好,特別是對于外星筆記本電腦的游戲玩家來說...

  • css代碼,網站css代碼

    css代碼,網站css代碼 相關圖片css字體顏色代碼四川雅安蘆山發生7.0級地震,許多網站的首頁都變成灰色,表示哀悼。接下來,作者整理了幾個使網頁變灰的CSS代碼方法。1:支持ie!Doctypehtml pubcss網頁設計代碼...

  • 電腦死機怎么辦?,電腦死機按什么都沒用

    電腦死機怎么辦?,電腦死機按什么都沒用 相關圖片電腦老是死機在計算機操作過程中,會遇到系統無法啟動、屏幕“定格”不響應、鼠標和鍵盤無法輸入、軟件操作正常不中斷等情況。這就是所謂的撞車,會影響我們的使用,那怎么解...

  • 快捷鍵,快捷鍵大全

    快捷鍵,快捷鍵大全 相關圖片復制的快捷鍵是哪個工具指針,選擇后面的對象[v],[0]部分[a],[1]選擇框,橢圓選擇框[M]套索,多邊形套索[l]切割,導出區域[C]魔棒[w]線工具[n]筆工具[P]矩形復制快捷鍵怎么用...

  • 藍屏代碼0x000007b,藍屏代碼0x000007b解決

    藍屏代碼0x000007b,藍屏代碼0x000007b解決 相關圖片0000007b藍屏bios設置計算機已經進入我們的生活,給我們帶來了極大的便利,同時也缺乏故障。這不是我們王老鄉遇到電腦藍屏的情況。他理解藍屏代碼0x000007b,如果我們遇到了藍屏代碼...

熱評文章

  • 魔方還原法,三階魔方還原法

    魔方還原法,三階魔方還原法 相關圖片三層魔方還原法魔方,我相信很多人都摸過了。它的中心點是一種顏色,它的邊將有兩種顏色,它的角包含三種顏色。如果你能恢復一個受干擾的立方體,它將是非常充實的。但是很多...

  • 什么是科學計算法,科學計數法

    什么是科學計算法,科學計數法 相關圖片科學身高計算法CSS3和HTML5是網頁設計的共同趨勢。本文來源于騰訊內部餐卡充值改版項目CSS3動畫的經驗總結。雖然你不能訪問騰訊的餐廳卡網站,但你可以看看有趣的動畫例子B科學計數...

  • 筆記本內置無線網卡推薦,筆記本電腦內置無線網卡

    筆記本內置無線網卡推薦,筆記本電腦內置無線網卡 相關圖片筆記本無線網卡怎么安裝現在筆記本隨處可見,但用戶在長時間使用后出現了一些故障,如:無線網卡損壞,或無線網卡接觸不良。為了不影響筆記本電腦的使用,我們可以考慮更換筆...

  • 0x0000007e藍屏代碼,0x000000be藍屏代碼

    0x0000007e藍屏代碼,0x000000be藍屏代碼 相關圖片電腦藍屏代碼0x0000001e有幾千萬臺電腦出現故障,其中一半是電腦的藍屏可以看出,對于win7和XP用戶來說,電腦的藍屏是多么痛苦。事實上,電腦藍屏的原因不止一個,那么電腦藍屏的代...

  • a標簽屬于什么元素,a標簽是什么元素

    a標簽屬于什么元素,a標簽是什么元素 相關圖片a標簽為什么會占滿整個父元素與XHTML相比,HTML5通過簡單的元素引發了一系列思考,坦率地說,這確實是一個非常需要的簡化。這些簡化之一是能夠打包塊級元素,如div、H標記(H1。。。...

  • 電腦日期總是不對,電腦時間怎么改24小時制

    電腦日期總是不對,電腦時間怎么改24小時制 相關圖片電腦顯示超頻怎么恢復許多朋友想知道計算機時間的不準確性。為了幫助你更好地理解電腦時間的不準確,今天的編輯將分享一個關于電腦時間不準確的故事,希望能對你有所幫助。很...

  • 交互設計要學什么,什么是交互設計

    交互設計要學什么,什么是交互設計 相關圖片用戶交互設計想成為高級交互設計師嗎?僅僅“了解企業”和“解決問題”并不能構成你的核心競爭力。今天阿里巴巴設計師的好文章,從追求成本、獨創性、延伸性和思考性四個方面...

  • 筆記本鍵盤失靈打不出字,筆記本鍵盤失靈打不出字怎么辦

    筆記本鍵盤失靈打不出字,筆記本鍵盤失靈打不出字怎么辦 相關圖片筆記本鍵盤打不起字在日常辦公室里,許多人喜歡隨身攜帶筆記本電腦。在大學里,一些專業學生會帶著自己的筆記本電腦去上課,筆記本電腦使用廣泛,攜帶方便。但是,由于它給我...

  • 不規則形狀,不規則

    不規則形狀,不規則 相關圖片不規則形狀怎么算面積前段時間,當我在做一個小項目時,我遇到了一種導航方法。這時我突然想到了很久以前看到的梯子形狀的不規則航行,于是就試著去做。結果,我遇到了幾個問...

  • 電腦經常黑屏幾秒恢復,電腦黑屏一兩秒后恢復

    電腦經常黑屏幾秒恢復,電腦黑屏一兩秒后恢復 相關圖片微信黑屏怎么恢復正常很多朋友都想學習電腦黑屏系統的方法,畢竟電腦黑屏的案例很多,那么如何操作電腦黑屏呢?下面小編就為大家帶來電腦黑屏圖文教程,希望大家看完后會喜歡...

關注微信

变脸官网查询