DIV+CSS中浏览器兼容方法及div+css的使用技巧

  相信很多的朋友在div+css的页面制作当中都会遇到这个问题,由于IE系列浏览器对于HTML标签和CSS样式表的解释与其他浏览器会有所区别,所以在制作页面的时候经常会出现一些小BUG,和网页错位等现象,下面站长好站为大家讲解一写,在div+css中如何兼容各大浏览器。

  首先我们先要检查相应的HTML标签,如果你的标签错误,无论你如何修改CSS样式,都不会解决问题,即使是老手也经常会犯标签嵌套错误。CSS样式是否有错误,比如你是否少了“;”分号分割,是否忘记了“}”结束大括号。HTML中是否忘记了DOCTYPE声明。

  CSS样式要注意,float元素需要指定固定宽度,并且要清除浮动,另外float元素不能指定margin属性,因为在IE6浏览器下存在BUG,float浮动元素的宽度总合要小于100%,也就是父级层的盒子的宽度。在我们新建一个css的时候要把所有的标签都归于默认形式,也就是padding和margin都要设置为0,可以用“*”号来还原默认样式,因为在各大浏览器中对于默认的div、li、ul等标签的内外间距解释不同,所以我们要全部设置为0,需要的时候在单独设置。

  但是如果不管如何的检查,HTML和CSS都没有问题,但是就是不兼容,那么就可以用各各浏览器之间的hack来解决兼容上的问题,下面我给出我个人比较常用的一些浏览器hack。

  1、!important

  !important是针对于火狐等标准浏览器特有的hack,IE6不支持该声明,使用时要提前声明。例(.div{ width:100px !important;} .div{ width:50px;}),火狐等标准浏览器的DIV就是100像素的宽度,而IE6则是50像素的宽度。

  *html *+html /9

  这三样分别为IE6、IE7、IE8的特有标签,这样就可以分别为IE6、IE7、IE8分别设置不同的样式,如*html div{ width:100;} *+html div{ width:90px;} div{ width:80px/9;} 这样设置的话,那么IE6的宽度是100像素,IE7的宽度为90像素,IE8的宽度为80像素,这样如果在结合上面的!Important,那么就可以彻底的把IE6、IE7、IE8、火狐等标准浏览器进行分别设置样式了,从而达到浏览器兼容。

  上面说了各大浏览器的hack,如果你全部掌握了,制作出一个兼容主流浏览器的网页是非常容易的,唯一的区别就是CSS的代码多一些而已。下面介绍一些在div+css中使用的一些技巧。

  在CSS中写div{ width:100px; margin:0 auto;}可以使DIV块在整个网页中横向居中。

  在CSS中写div{ height:20px; line-height:20px;}这样写可以使这个DIV中的内容在20像素的高度之中进行垂直居中,但是需要注意的是,该内容不可以换行,否则在火狐等浏览器下内容会重合,而在IE浏览器中会换行。

  如果需要给内联元素,如span、a等标签设置宽度和高度,必须给它们设置成块元素,a,span{display:block或inline-block;}前一个是把a和span标签改变成块元素,第二个是把a和span改成内联块元素。

  ul、li等元素在各大浏览器中都有样式和padding,所以在使用前,应该进行事先声明。

  清除float,可以用.clear{ clear:both;}这个需要在浮动结束位置进行设置,也可以在父标签中设置 div{ height:1%; overflow:hidden; }这样也是可以清除浮动的,但是有的时候不好使,还是得用第一种方法。

  以上就是我个人对于div+css在兼容上和技巧的使用上一些总结方法,如果有遗漏,欢迎大家在下面进行补充,希望能够解决您的问题。(站长好站 原创 http://www.zzhaoz.com/wangzhanyunying/wangzhansheji/20110912/243/)

时间: 2024-08-22 14:46:52

DIV+CSS中浏览器兼容方法及div+css的使用技巧的相关文章

div css javascript 浏览器兼容手册

div css教程 javascript教程 浏览器兼容手册 并不一定全,有的也可能不准确,比如新出的IE8.Chrome等都没有太多涉及,虽然最近做的一些项目也兼容了IE8.Chrome等,但都没来的及总结进去,后来就忘了...汗.大家一起慢慢完善吧. javascript部分 1. document.form.item 问题 问题: 代码中存在 document.formName.item("itemName") 这样的语句,不能在FF下运行 解决方法: 改用 document.f

谈谈JavaScript中浏览器兼容问题的写法小议_javascript技巧

前言 JavaScript中很多坑,其中对浏览器的兼容也是一个问题,本文就简略的归纳了部分针对浏览器兼容问题的写法的例子,旨在便于查找.如果读者有什么好的意见建议,请留言交流,谢谢! window窗口大小 1.在IE9+.Chrome.Firefox.Opera以及Safari中 window.innerHeight获取浏览器窗口的内部高度 window.innerWidth获取浏览器窗口的内部宽度 var msg = "窗口宽度:" + window.innerHeight + &q

jquery动态加载css样式 浏览器兼容处理

个比较严重的bug:在IE6.IE7下,验证提示的样式文件加载不进来. 于是今天早上针对这个bug,测试了好多次,仍然不行,最后才发现原来是因为用jquery的方法动态加载css教程样式文件,存在兼容问题. 在jquery.skygqCheckAjaxform.1.3.js文件中原来动态加载css文件的代码是这样的: //加载css样式 if ($("link[href$=valid.css]").length == 0){  $(' <LINK href="'+set

css中清除浮动方法介绍

   代码如下 复制代码    <style>             .container {                 border: 3px solid #000;                 width: 600px;                 background-color: #eee;                 margin-bottom:50px;             }                         .floatedbox {   

图片在固定div组中自适应并撑满div格如何实现(内详)?

问题描述 标题可能描述不太清除,这里详细说明:前置1:图片来源于用户,大小不确定,宽高比不确定前置2:一块固定的div缩略去显示1-9张图片,外层div格式固定,1-9张图片的格子div划分也固定(9张图片的时候类似九宫格). 如果我图片按照宽度去等比缩放,溢出的高度通过css overflow:hidden去隐藏,部分图片可以达到效果.宽度既全部压缩,高度只显示部分,无变形. 问题来了: 但是有部分图片因为高度随着适应宽度进行等比缩放,缩放后的高度已经无法撑满显示这张图片的div.就会留白..

通过设置CSS中的position属性来固定层的位置_javascript技巧

定义和用法 position 属性规定元素的定位类型. 说明 这个属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型.相对定位元素会相对于它在正常流中的默认位置偏移. 默认值: static 继承性: no 版本: CSS2 JavaScript 语法: object.style.position="absolute" 实例 定位 h2 元素: h2 { position:absolute; left:100px; t

CSS不同浏览器兼容问题

IE5.X/win对box-model的解析是一样的,他们认为width包括了边框(border)和补白(padding),幸运的是这个情况在IE6中有了好转 但是IE6在向后兼容的同时也包容了以前的错误,IE6其实有两个核心,在旧的页面前他仍旧表现出对错误的宽容,只有在文档中严格地加上文档类型(DOCTYPE)声明,IE6才能够接受正确的box-model 所以,tantak的hack必须和正确的DOCTYPE同时包含在文档中才能够正常工作 Quote div.content { width:

源码解读jQ中浏览器兼容模块support第1/2页_jquery

前言 jQuery的属性support是判断浏览器之间是否兼容的模块 ,该模块包含了leadingWhitespace,tbody,htmlSerialize,style,hrefNormalized,opacity,cssFloat,checkOn,optSelected,getSetAttribute-.等兼容问题,所有的这些属性也只是jQuery内部会用到,因为jQ内部一些模块需要对这些东西进行判断, 就直接写成了一个support模块, 可以供我们, 但是我们写代码的时基本都没用到啊,

CSS hack浏览器兼容一览表

css|浏览器 CSS hack是指我们为了兼容各浏览器,而使用的特别的css定义技巧.这是国外摘来的一张CSS hack列表,显示了各浏览器对css hack的支持程度,对我们制作兼容网页非常有帮助.