支付宝前端开源框架Alice(解决各个浏览器的样式不一致的问题)
生活随笔
收集整理的這篇文章主要介紹了
支付宝前端开源框架Alice(解决各个浏览器的样式不一致的问题)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
/**************** 網址:https://github.com/sofish/Alice /****************** @charset "utf-8"; /* @名稱: base @功能: 重設瀏覽器默認樣式 */ /* 防止用戶自定義背景顏色對網頁的影響,添加讓用戶可以自定義字體 */ html{ color:#000;background:#fff; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } /* 內外邊距通常讓各個瀏覽器樣式的表現位置不同 */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { margin:0;padding:0; } /* 重設 HTML5 標簽, IE 需要在 js 中 createElement(TAG) */ article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; } /* HTML5 媒體文件跟 img 保持一致 */ audio,canvas,video { display: inline-block;*display: inline;*zoom: 1; } /* 要注意表單元素并不繼承父級 font 的問題 */ body,button,input,select,textarea{ font:12px/1.5 tahoma,arial,\5b8b\4f53; } input,select,textarea{ font-size:100%; } /* 去掉各Table? cell 的邊距并讓其邊重合 */ table{ border-collapse:collapse;border-spacing:0; } /* IE bug fixed: th 不繼承 text-align*/ th{ text-align:inherit; } /* 去除默認邊框 */ fieldset,img{ border:0; } /* ie6 7 8(q) bug 顯示為行內表現 */ iframe{ display:block; } /* 去掉 firefox 下此元素的邊框 */ abbr,acronym{ border:0;font-variant:normal; } /* 一致的 del 樣式 */ del { text-decoration:line-through; } address,caption,cite,code,dfn,em,th,var { font-style:normal; font-weight:500; } /* 去掉列表前的標識, li 會繼承 */ ol,ul { list-style:none; } /* 對齊是排版最重要的因素, 別讓什么都居中 */ caption,th { text-align:left; } /* 來自yahoo, 讓標題都自定義, 適應多個系統應用 */ h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:500; } q:before,q:after { content:''; } /* 統一上標和下標 */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup {top: -0.5em;} sub {bottom: -0.25em;} /* 讓鏈接在 hover 狀態下顯示下劃線 */ a:hover { text-decoration:underline; } /* 默認不顯示下劃線,保持頁面簡潔 */ ins,a { text-decoration:none; } /* 清理浮動 */ .fn-clear:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0; } .fn-clear { zoom:1; /* for IE6 IE7 */ } /* 隱藏, 通常用來與 JS 配合 */ body .fn-hide { display:none; } /* 設置內聯, 減少浮動帶來的bug */ .fn-left,.fn-right { display:inline; } .fn-left { float:left; } .fn-right { float:right; }
總結
以上是生活随笔為你收集整理的支付宝前端开源框架Alice(解决各个浏览器的样式不一致的问题)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: AIX 添加开机启动项
- 下一篇: Web前端 性能优化