目前浏览器越来越多,而在网页设计中难免会遇到CSS不兼容其他浏览器,或者是新版本浏览器的问题。现在说一下如何解除IE8下的网页设计不兼容的困惑。
IE8的HTML5增强功能包括AJAX 导航、DOM 存储、跨文档消息传送 (XDM) 和连接事件。它们是严格按照W3C HTML 5.0 草案开发的。所以当你设计的网页在IE5、IE6、IE7、FF下显示都没问题。在IE8下就变形了的时候,那么可能是因为你的css不能通过W3C HTML 5.0验证
解决CSS的浏览器兼容性问题,天桥网站设计的总结:
/* 统一各个浏览器下 外边距margin、内填充padding的默认值 */
html,body,a,h1,h2,h3,h4,h5,h6,p,div,ul,li,ol,dl,dt,dd,img,form,input,textarea,select,fieldset { margin:0px; padding:0px }
/* 统一标题公共样式 text-shadow:gray 0px 0px 5px; 文字阴影 font-weight:800 平滑的加粗 */
h1,h2,h3,h4,h5,h6,b,strong { font-family:Arial,Verdana,sans-serif; font-weight:800 }
/* 网页公用的属性: 字体、文字颜色、背景色等 */
body,table,input,select,textarea { font-family:SimSun, "宋体", Arial; font-size:12px; }
body, table { background-color:white }
body { color:#636363; font-size:12px }
/* 控制英文字符连续自动换行 */
div,span,th,td,dt,dd,h1,h2,h3,h4,h5,h6,em,strong,i,a,b,a,p { word-break:break-all; word-wrap:break-word; }
ul,ol,dl { list-style-type:none }
select,input,select { vertical-align:middle }
img { border:0 none; text-align:absmiddle; background-color:transparent }
/* 表格居中显示 */
table { margin-left:auto; margin-right:auto; border-width:0 none }
/* 默认链接的样式设置 */
a { color:#000; text-decoration:none }
a:hover { text-decoration:underline }
/* 去a虚线框 cdl: clear dotted line */
.cdl, a:active { outline:none; blr:expression(this.onFocus=this.blur()) }
:focus { outline:none } /* for Firefox */
/* 清浮动 */
.clear { display:block !important; clear:both; height:0px; line-height:0px; font-size:0 }
/* 常用,采用单词首字母缩写方式命名:保持良好的命名风格很重要 :) */
.tdn { text-decoration:none } /* 链接无下划线 */
.ofh { overflow:hidden } /* 溢出隐藏 */
.tal { text-align:left } /* 内容左对齐 */
.tar { text-align:right } /* 内容右对齐 */
.tac { text-align:center } /* 内容居中 */
.fl { float:left } /* 左浮动 */
.fr { float:right } /* 右浮动 */
.m0a { margin:0 auto } /* 容器内水平居中 */
.bn { border:0 none !important; } /* 无边框 */
请立即点击咨询我们或拨打咨询热线: 1823-7777-110,我们会详细为你一一解答你心中的疑难。项目经理在线