pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

瀏覽器默認樣式(User Agent Stylesheet)的介紹與最佳處理方法

這篇文章主要給大家介紹了瀏覽器默認樣式(User Agent Stylesheet)的相關資料,并給出了相對應的最佳解決方法。有需要的朋友可以參考借鑒,下面來一起看看吧。

發現

最近在調整網頁的格式發現網頁底部總是有一個10像素左右的空格。

通過用Chrome流浪器的審查元素發現有一個叫user agent stylesheet設置整個form的margin-botton:1em;

通過上網查資料發現這個user agent stylesheet是流浪器的一些默認樣式。如果對這個默認樣式不滿意最簡單的解決辦法就是重新設置該樣式的屬性,因為user agent stylesheet優先級很低,會被覆蓋,這樣就不會影響到我們的樣式了,比如這里我就講form 的margin-bottom設為0px。

User Agent Stylesheet介紹

不同瀏覽器對于相同元素的默認樣式并不一致,這也是為什么我們在CSS的最開始要寫 * {padding:0;marging:0};

不過現在說的可不只是這些。基本上,不同內核的兩個瀏覽器在某些元素的表現都會存在差異,比如縮進的大小、字體選擇、字符樣式等。也許一個很漂亮的CSS樣式表在一個瀏覽器上表現良好,在另外一個瀏覽器上即使是沒有CSS Bug的情況也會變得結構混亂起來,我都是瀏覽器默認樣式在作怪。

因此,我們在生成CSS樣式規則的時候,一個必做的步驟就是重設瀏覽器的默認樣式,也就是覆蓋掉瀏覽器的默認樣式。和使用 * {padding:0;margin:0}有所不同,并不是所有的元素都存在padding和margin的差異(元素列表、有序列表在Internet Xplorer和Firefox中的不同是由于它們的縮進采用了margin縮進和padding縮進)。

例如下面這段:

這段代碼在Internet Explorer中使用的字體是Times New Roman,而在Firefox和Opera中使用的是系統默認字體。因此我們要為<h1>在CSS中設定一個統一的樣式。

但是,如果我們像使用* {padding:0;margin:0}一樣去使用通配符“*”來簡單地設定全局樣式,那么一個很明顯的問題就會出現,比如像form元素、input元素、textarea等在某些瀏覽器中會忽略對它們的重新設定,更重要的是這將會嚴重破壞這些元素的外觀,所以你又不得不去手動去一一為它們重新設定一個padding值和margin值。所以我們應該放棄簡單地使用“*”,而是為第一個存在表現不一致的元素進行重設,如body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre等等。

同時,元素的默認樣式可能會破壞頁面的外觀。比如<b>元素會把文字加粗,<blockquote>會大段縮進,<em>會使文字傾斜等,如果你想要求頁面文本外觀一致的話,也應該在CSS中把這些元素的外觀進行重設。同時,有時候我們要求這些元素的外觀和父元素一樣,可以直接使用 inherit從父元素繼承即可。

處理方法

至于哪些元素應該被重設?Yahoo!已經為我們做了比較出的總結。根據雅虎的建議,你需要把這些規則放到一個名為Reset.css的文件中單獨引用(推薦這種做法):

html{color:#000;background:#FFF;} 
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; 
} 

你要做的就是把這些規則簡單地保存到reset.css中,然后在頁面中使用。在需要給這些元素增加新的樣式的時候,和其它元素的設定沒有什么不同。

注意:上面reset.css中 input,textarea,select{*font-size:100%;} 只有Internet Explorer可以認識,這樣的設定是為了使在Internet Explorer中可以縮放表單控件字體的大小。

總結

以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對的支持。

【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。

相關文檔推薦

主站蜘蛛池模板: 北京模型公司-军事模型-工业模型制作-北京百艺模型沙盘公司 | 温州富欧金属封头-不锈钢封头厂家 | 超声波焊接机,振动摩擦焊接机,激光塑料焊接机,超声波焊接模具工装-德召尼克(常州)焊接科技有限公司 | 微量水分测定仪_厂家_卡尔费休微量水分测定仪-淄博库仑 | 北京网站建设公司_北京网站制作公司_北京网站设计公司-北京爱品特网站建站公司 | 依维柯自动挡房车,自行式国产改装房车,小型房车价格,中国十大房车品牌_南京拓锐斯特房车 - 南京拓锐斯特房车 | 欧景装饰设计工程有限公司-无锡欧景装饰官网 | 罗茨真空机组,立式无油往复真空泵,2BV水环真空泵-力侨真空科技 | 电动百叶窗,开窗器,电动遮阳百叶,电动开窗机生产厂家-徐州鑫友工控科技发展有限公司 | China plate rolling machine manufacturer,cone rolling machine-Saint Fighter | 烟气换热器_GGH烟气换热器_空气预热器_高温气气换热器-青岛康景辉 | 齿轮减速机_齿轮减速电机-VEMT蜗轮蜗杆减速机马达生产厂家瓦玛特传动瑞环机电 | 西安展台设计搭建_西安活动策划公司_西安会议会场布置_西安展厅设计西安旭阳展览展示 | 网优资讯-为循环资源、大宗商品、工业服务提供资讯与行情分析的数据服务平台 | 螺纹三通快插接头-弯通快插接头-宁波舜驰气动科技有限公司 | 商用绞肉机-熟肉切片机-冻肉切丁机-猪肉开条机 - 广州市正盈机械设备有限公司 | 金属波纹补偿器厂家_不锈钢膨胀节价格_非金属伸缩节定制-庆达补偿器 | 环压强度试验机-拉链拉力试验机-上海倾技仪器仪表科技有限公司 | 南京雕塑制作厂家-不锈钢雕塑制作-玻璃钢雕塑制作-先登雕塑厂 | 蓝莓施肥机,智能施肥机,自动施肥机,水肥一体化项目,水肥一体机厂家,小型施肥机,圣大节水,滴灌施工方案,山东圣大节水科技有限公司官网17864474793 | 不发火防静电金属骨料_无机磨石_水泥自流平_修补砂浆厂家「圣威特」 | 谈股票-今日股票行情走势分析-牛股推荐排行榜 | 全国国际化学校_国际高中招生_一站式升学择校服务-国际学校网 | 高速龙门架厂家_监控杆_多功能灯杆_信号灯杆_锂电池太阳能路灯-鑫世源照明 | 琉璃瓦-琉璃瓦厂家-安徽盛阳新型建材科技有限公司 | 胶原检测试剂盒,弹性蛋白检测试剂盒,类克ELISA试剂盒,阿达木单抗ELISA试剂盒-北京群晓科苑生物技术有限公司 | 泥沙分离_泥沙分离设备_泥砂分离机_洛阳隆中重工机械有限公司 | 重庆私家花园设计-别墅花园-庭院-景观设计-重庆彩木园林建设有限公司 | 中视电广_短视频拍摄_短视频推广_短视频代运营_宣传片拍摄_影视广告制作_中视电广 | 塑胶地板-商用PVC地板-pvc地板革-安耐宝pvc塑胶地板厂家 | 斗式提升机_链式斗提机_带式斗提机厂家无锡市鸿诚输送机械有限公司 | 山东风淋室_201/304不锈钢风淋室净化设备厂家-盛之源风淋室厂家 翻斗式矿车|固定式矿车|曲轨侧卸式矿车|梭式矿车|矿车配件-山东卓力矿车生产厂家 | 东莞工厂厂房装修_无尘车间施工_钢结构工程安装-广东集景建筑装饰设计工程有限公司 | 二手色谱仪器,十万分之一分析天平,蒸发光检测器,电位滴定仪-湖北捷岛科学仪器有限公司 | 展厅设计-展馆设计-专业企业展厅展馆设计公司-昆明华文创意 | 实验室pH计|电导率仪|溶解氧测定仪|离子浓度计|多参数水质分析仪|pH电极-上海般特仪器有限公司 | led全彩屏-室内|学校|展厅|p3|户外|会议室|圆柱|p2.5LED显示屏-LED显示屏价格-LED互动地砖屏_蕙宇屏科技 | 飞扬动力官网-广告公司管理软件,广告公司管理系统,喷绘写真条幅制作管理软件,广告公司ERP系统 | 咖啡加盟-咖啡店加盟-咖啡西餐厅加盟-塞纳左岸咖啡西餐厅官网 | 软启动器-上海能曼电气有限公司| 伺服电机维修、驱动器维修「安川|三菱|松下」伺服维修公司-深圳华创益 |