- 相關推薦
CSS教程之重置默認樣式與IE兼容圓角的解決方法
小編這里有一篇總結css reset以及IE兼容css教程3圓角的htc解決方法 ，屬于比較全面的文章，希望能對大家有所幫助。
重置默認樣式
最近看到一個詞叫css reset。什么叫做css reset呢?我理解為重置css，也就是重置默認樣式。我在中講到，一些標簽元素在HTML下有一個默認屬性值，我們在寫css頁面的時候，為了避免在css中重復定義它們，我們需要重置默認樣式(css reset)。每個人的用法和寫法都不一樣。找到一篇關于 可以看看國外使用css reset的比例調查。
接下來我也查看了國內的兩個網站，用Firebug按F12看看他們的css reset怎么寫的?
淘寶()：
html {
overflow-x:auto;
overflow-y:scroll;
}
body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td {
font-weight:400;
margin:0;
padding:0;
}
h1, h2, h3, h4, h4, h5 {
margin:0;
padding:0;
}
body {
background-color:#FFFFFF;
color:#666666;
font-family:Helvetica,Arial,sans-serif;
font-size:12px;
padding:0 10px;
text-align:left;
}
select {
font-size:12px;
}
table {
border-collapse:collapse;
}
fieldset, img {
border:0 none;
}
fieldset {
margin:0;
padding:0;
}
fieldset p {
margin:0;
padding:0 0 0 8px;
}
legend {
display:none;
}
address, caption, em, strong, th, i {
font-style:normal;
font-weight:400;
}
table caption {
margin-left:-1px;
}
hr {
border-bottom:1px solid #FFFFFF;
border-top:1px solid #E4E4E4;
border-width:1px 0;
clear:both;
height:2px;
margin:5px 0;
overflow:hidden;
}
ol, ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
caption, th {
text-align:left;
}
q:before, q:after, blockquote:before, blockquote:after {
content:"";
}
百度有啊()：(架構基本上是模仿YUI來做的)
body {
font-family:arial,helvetica,sans-serif;
font-size:13px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.4;
text-align:center;
}
body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, p, form, fieldset, legend, input, textarea, select, button, th, td {
margin:0;
padding:0;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
table {
font-size:inherit;
}
input, select {
font-family:arial,helvetica,clean,sans-serif;
font-size:100%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
button {
overflow:visible;
}
th, em, strong, b, address, cite {
font-style:normal;
font-weight:normal;
}
li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
img, fieldset {
border:0 none;
}
ins {
text-decoration:none;
}
在《超越css》一書中建議我們做網站開始重置所有默認樣式：
/* Normalizes margin,padding */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td { margin:0;padding:0}
/* Normalizes font-size for headers */
h1,h2,h3,h4,h5,h6 { font-size:100%}
/* Removes list-style from lists */
ol,ul { list-style:none }
/* Normalizes font-size and font-weight to normal */
address,caption,cite,code,dfn,em,strong,th,var { font-size:normal; font-weight:normal }
/* Removes list-style from lists */
table { border-collapse:collapse; border-spacing:0 }
/* Removes border from fieldset and img */
fieldset,img { border:0 }
/* Left-aligns text in caption and th */
caption,th { text-align:left }
/* Removes quotation marks from q */
q:before,q:after { content:''}
那我們實際寫代碼的時候該怎么來css reset呢?
我個人推薦使用(和)的 css reset
Eric Meyer's Reset:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
YUI:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
結合他們的css reset寫法，再根據自己的實際情況，一定能寫出符合自己網站的完美的css reset。
IE兼容css教程3圓角的htc解決方法
現在css3的border-radius屬性可以很方便的實現圓角功能，對網站前臺人員無疑是一件喜事，但悲劇的是IE6/7/8并不支持，讓我們棄新技術不用，是不可能的，因此找到了一種解決的辦法--- IE利用VML矢量可標記語言作為畫筆繪出圓角：
下載一個壓縮包ie-css3.htc，里面有一個微軟的腳本文件(11KB)和一個用來測試服務器是否有正確的Content-Type的 HTML文件，.htc 文件是IE內核支持Web行為后用來描述此類行為的腳本文件。它們定義了一套方法和屬性，程序員幾乎可以把這些方法和屬性應用到HTML頁面上的任何元素 上去。Web 行為是非常偉大的因為它們允許程序員把自定義的功能“連接”到現有的元素和控件，而不是必須讓用戶下載二進制文件(例如ActiveX 控件)來完成這個功能。
使用演示：
1. .main{
2. border: 2px solid #C0C0C0;
3. -moz-border-radius: 10px;
4. -webkit-border-radius: 10px;
5. border-radius: 10px;
6. position:relative;
7. z-index:100;
8. behavior: url(此處為ie-css3.htc文件的絕對路徑);
9. }
Webkit內核的瀏覽器支持“-webkit-border-radius: 10px;”屬性(10px是圓角半徑)，可以直接解析出圓角;Firefox瀏覽器支持“-moz-border-radius: 10px;”屬性，也是可以直接解析出圓角;IE系瀏覽器則需要加上“border-radius: 15px;”的屬性。注意：
1、behavior的url里一定要填寫ie-css3.htc的絕對路徑，因為 IE瀏覽器找該文件是相對當前html文件路徑來找的，所以對于Wordpress等動態程序生成的頁面一定要填寫絕對路徑。
2、一定要有定位屬性：position:relative;
3、因為在IE瀏覽器下這些CSS3效果的實現是要借助于VML，由VML繪制圓角或是投影效果，所以還需要一個z-index屬性。z-index屬性最好設置得比較大，如2。
4、如果在IE瀏覽器下某些模塊無法用此渲染，可以試著絕對定位相應的層，即加上“ width: 400px; height:400px;”屬性。
5、radius屬性的10px是圓角半徑，還可以給兩個值如“border-radius: 10px 5px;”，這樣則左上角與右下角半徑為10px，右上角與左下角半徑為5px。也可以賦4個值，為“上 右 下 左”。
【CSS教程之重置默認樣式與IE兼容圓角的解決方法】相關文章：
CSS教程之盒模型04-01
2017最新css樣式大全03-11
CSS基礎教程之背景圖片04-01
CSS-層疊樣式表基礎教程03-05
AutoCAD版本及打印樣式不兼容怎么辦03-20
IE瀏覽器默認HTML編輯器的設置方法03-29
CAD中圓角及倒角的技巧03-31
netgear默認無線密碼03-03
CSS入門教程01-25