新开传世私服/></a></div>
  </div>
  <div class=
收藏本站
联系我们
网站地图
首  页 新开传世私服 传世装备攻略 传世玩家文章 赚钱SF辅助

用DIV+CSS构建的网页中兼容性问题

阅读 420 次      来源:传世新闻组      作者:传世SF     日期:2013/8/6

DIV+CSS构建网站时常会出现浏览器不兼容的问题,下面整理了一些常见不兼容问题,及解决办法!

1、用!important解决IE和Mozilla的布局差别

!important是CSS1就定义的语法,作用是提高指定样式规则的应用优先权,最重要的一点是:IE一直都不支持这个语法,而其他的浏览器都支持。因此我们就可以利用这一点来分别给IE和其他浏览器不同的样式定义,例如,我们定义这样一个样式:

.colortest{ border:20pxsolid#60A179!important; border:20pxsolid#00F; padding:30px; width:300px;}

在Mozilla中浏览时候,能够理解!important的优先级,因此显示#60A179的颜色;在IE中浏览时候,不能够理解!important的优先级,因此显示#00F的颜色。

2、解决超链接访问过后hover样式不显示的问题

改变CSS属性的排列顺序: 先后顺序标准应为:a:link—a:visited—a:hover—a:active

3、Li中内容超过长度后以省略号显示的方法

<meta content=”text/html; charset=gb2312″ http-equiv=”Content-Type” /><style type=”text/css”>
<!–
li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;}
–></style>
<ul>
<li><a href=”#” mce_href=”#”>web标准常见问题大全web标准常见问题大全</a></li>
<li><a href=”#” mce_href=”#”>web标准常见问题大全web标准常见问题大全</a></li>
</ul>

4、margin和padding定义尺寸的缩写

margin:3px——表示所有边都是3px;
margin:3px 5px—— 表示top和bottom的值是3px ,right和left的值是5px
margin:3px 5px 7px——表示top的值是3,right和left的值是5,bottom的值是7
margin:3px 5px 7px 5px——四个值依次表示top,right,bottom,left;上右下左。

5、解决IE不能正确显示透明PNG——header内加入代码

程序代码 程序代码
<script language=”javascript”>
function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == “PNG”)
{
var imgID = (img.id) ? “id=’” + img.id + “‘ ” : “”
var imgClass = (img.className) ? “class=’” + img.className + “‘ ” : “”
var imgTitle = (img.title) ? “title=’” + img.title + “‘ ” : “title=’” + img.alt + “‘ ”
var imgStyle = “display:inline-block;” + img.style.cssText
if (img.align == “left”) imgStyle = “float:left;” + imgStyle
if (img.align == “right”) imgStyle 


 “float:right;” + imgStyle
if (img.parentElement.href) imgStyle = “cursor:hand;” + imgStyle
var strNewHTML = “<span ” + imgID + imgClass + imgTitle
+ ” style=”" + “width:” + img.width + “px; height:” + img.height + “px;” + imgStyle + “;”
+ “filter:progid:DXImageTransform.Microsoft.AlphaImageLoader”
+ “(src=’” + img.src + “‘, sizingMethod=’scale’);”></span>”
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent(”onload”, correctPNG);
</script>

6、url在Firefox和IE下表现不同
使用(padding:0; margin:0; list-style:inside;)或者(padding:0; margin:0; list-style:none;)实现兼容,参考地址:http://and8.net/article.asp?id=273

7、BOX模型在firefox和IE中的解释相差2px的解决方法

div{margin:30px!important;margin:28px;}

注意这两个margin的顺序一定不能写反。根据上面提到的IE并不支持!important,所以在IE下其实解释成这样:

div{maring:30px;margin:28px}

重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;

8、margin的默认效果
div里的内容,ie默认为居中,而ff默认为左对齐。使ff内容居中的方法是增加代码margin:auto;



上一篇:布局时应注意浏览器兼容性    下一篇:div+css布局的相关收集
推荐文章
当打架高手就要提高暴击伤害
法的哪一套比较好对付赤月蘑菇
给新入行的个人站长10点建议
Google排名的三大关键因素
百度搜索引擎的特点-搜索优化
网站搜索引擎优化实用十招妙技
用DIV+CSS构建的网页中兼容性问题
Div+CSS布局网站设计的优点是这样的!
经典分页代码样式
互联网IP地址备案管理办法
互联网站从事登载新闻业务管理暂行规定..
非经营性互联网信息服务备案管理办法
网站建设制作:企业网站如何发挥其真正..
好的虚拟主机应该具有下面这些特点
最新文章
私服游戏练级超快攻略
疾光电影可极大提高远程攻击攻击
​法师是一个高度竞争快速成长的职业
当打架高手就要提高暴击伤害
怎么过渡到web标准
xhtml1.0相关问题问答
div+css自适应高度
web标准概念入门
如何用CSS制作横向菜单让ulli横向排列..
同一个页面用多个id有什么影响
初学web标准的几个误区
博客推广:能日入上万IP,也许日入零IP
如何判断一个网站是否是web2.0的网站
Web2.0下一个版本是什么
关于Web2.0网站的创业思考
Web2.0编程思想:16条法则
web2.0概念结构
div+css布局的相关收集
用DIV+CSS构建的网页中兼容性问题
布局时应注意浏览器兼容性
web标准常见问题大全让FireFox与IE兼容..
DIV+CSS重构网站与SEO
让Google爱上你的网站
什么是XHTML,XML、DOM、DTD、W3C
DIV+CSS重构优势及注意的几点
经典布局3列1行高度自适应相等的方法
10条应该注意的divcss规则
divcss浏览器兼容要点分析
DIVCSS设计时IE6、IE7、FF与兼容性有关..
CSS2.0中最常用的18条技巧
常用CSS缩写语法总结
cssid如何避免与开发人员的id命名重复..
Div+CSS布局网站设计的优点是这样的!
简单、但很有效的css改进网站的设计
解决div布局时不能居中、居中失灵
友情链接:新开传世私服
  • 传世私服网
  • 爱看看电影网
  • 百度
  • 变态传世网站
  • 传世私服

Copyright 2004-2019 All Rights Reserved 无管理2.72传世SF|最新最大传世|网通传世私服|合击传世网|超变T合击传世私服 版权所有 apex英雄辅助