发文章
发文工具
撰写
网文摘手
文档
视频
思维导图
随笔
相册
原创同步助手
其他工具
图片转文字
文件清理
AI助手
留言交流
HTML Table局部布局与浏览器兼容性
注意:案例中所涉及的图片素材,页面下方提供下载 1、技术目标:
2、Table局部布局应用场景1 2.1)应用场景1(产品列表页面),如图: 2.2)布局分析:类似产品列表页面这种多行多列的数据展示方式, 一般使用表格布局来处理,HTML结构代码如下:
CSS样式代码如下: #Container{ width:980px; margin:0px auto;/*整体内容居中显示*/ } /*商品列表页样式开始*/ #main{ width:100%; margin:0px auto; border:0px; padding-top:34px; background:url(images/list_bg.gif) no-repeat; } .td_1{width:10%;} .td_2{width:20%;} .td_3{width:50%;} .td_4{width:20%;} .a_c td, .title td{ text-align:center; line-height:30px; /*每行的底部灰色虚线*/ border-bottom:1px #CCCCCC dashed; padding:10px 0px; } .title td{ font-weight:bold; } .a_c td{ line-height:30px; } /*商品列表页样式开始*/ 3、Table局部布局应用场景2 3.1)应用场景2(注册页面),如图: 3.2)在表单元素密集的页面,一般使用Table对表单控件进行排列, HTML结构代码如下:
CSS样式代码如下: #container{ width:980px;/*整体内容居中显示*/ margin:0px auto; } /*注册页面开始*/ #register{ width:100%; margin:0px auto; border:0px; padding-top:60px; background:url(images/reg_bg.gif) no-repeat; } #register td{ line-height:30px; } .register_left{ width:150px; text-align:right; } .register_right{ width:300px; text-align:left; vertical-align:top; } .reg_text,.reg_small{ height:16px; border:#333 1px solid; } .reg_text{ width:130px; } .reg_small{ width:30px; } #register .submit,#register .reset{ background-repeat:no-repeat; width:80px; height:34px; border:0; background-color:transparent; /*背景透明*/ } #register .submit{ background-image:url(images/submit.gif); } #register .reset{ background-image:url(images/reset.gif); } /*注册页面结束*/ 4、为什么需要考虑浏览器兼容性?
5、页面的兼容性测试 兼容性测试包括检查浏览器之间的兼容性以及验证代码是否符合W3C的标准 5.1)检查浏览器之间的兼容性 测试网页在各种浏览器产品及各种版本中显示效果是否一致,一般要求保证 IE和Firefox兼容。IE要求IE6.0到IE8.0兼容即可,所以开发者需要安装IE 的多个版本以及Firefox浏览器,IE多版本测试可使用IETester工具,安装 好IE8,打开IETest就可以测试IE5.5~IE8.0各版本的效果 注意:IETest自行下载使用 5.2)验证代码是否符合W3C的相关标准,可使用以下方法
6、如何解决浏览器兼容问题? 6.1)代码编写需要注意以下问题
6.2)根据浏览器的不同版本,编写相应的CSS代码 注意:
6.3)浏览器兼容CSS hack示例 示例1,IE与firefox的样式识别: <html> <head> <title>Untitled</title> <style type="text/css"> .divClass{ /* 该样式IE无法识别,而firefox可以识别, firefox识别其优先级比第2个border样式高 */ border: 14px solid red !important; border: 14px solid blue; width: 300px; height: 300px; } </style> </head> <body> <div class="divClass"></div> </body> </html> 示例2,各版本IE的样式识别(请在不同版本的IE下运行): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>网页兼容性</title> <style type="text/css"> /*修改各浏览器默认预留的页面内容边距*/ body{ margin:5px; padding:0px; } div{ font:bold 20px 宋体; /* Firefox */ font-size:12px\0; /* IE8在末尾用"\0" */ +font:normal 20px 黑体; /* IE7在开始用"+" */ _font:normal 16px 宋体; /* IE6在开始用"_" */ color:red; color:green\0; +color:purple; _color:blue; } </style> </head> <body> <div>不同浏览器效果。 <!--[if IE 8]>IE8<![endif]--> <!--[if IE 7]>IE7<![endif]--> <!--[if IE 6]>IE6<![endif]--> </div> </body> </html> 7、常见兼容性问题1,三像素文本慢移问题 问题描述:IE6.0中,浮动(float)元素与其后紧跟的一个行内元素之间 有3像素的间隙,称为"3像素文本慢移"问题,其他浏览器无此问题 示例代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>三像素文本慢移</title> <style type="text/css"> #left{ float:left; width:100px; height:30px; background-color:#F00; } span{ _margin-left:-3px;/*修复IE6 3像素文本慢移问题*/ } </style> </head> <body> <div id="left"></div><span>三像素文本慢移</span> </body> </html> 8、常见兼容性问题2,双倍边距问题 问题描述:IE6.0中,如果元素的浮动(float)方向与margin一致,如, 左浮动(float:left)元素设置左外边距(margin-left:50px),则外边距 会加倍(显示出100px的左外边距),称为"双倍边距"问题,其他浏览器 无此问题 示例代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>双倍边距问题</title> <style type="text/css"> body{ font-size:13px; margin:0px; line-height:20px; } div{ float:left; /*设置浮动元素为内联,可解决IE6双倍边距问题*/ display:inline; width:150px; height:60px; margin:0px 0px 0px 50px; background-color:#ccc; } </style> </head> <body> <div>左边界设为50px,其他边界均设为0px,但在IE6下左边界却是100px</div> </body> </html> 9、总结:
来自: quasiceo > 《待分类1》
0条评论
发表
请遵守用户 评论公约
如何通过session控制单点登录
jQuery遍历Table tr td td中包含标签
easyUI 验证控件应用、自定义、扩展验证 手机号码或电话话码格式
Python之路【第十一篇】前端初识之HTML
1、body里面分为两类标签:块级标签和内联标签,块级标签占用的是整行,内联标签占用的他所使用的实际大小如下图:<p>帅哥帅帅哥...
关于onblur和onfocus对表单的一点美化!
简单计算器javascript
isNaN(event.srcElement.value) &&op == "") { first += event.srcElement.value;
如何实现表格的动态创建
jquery的验证插件
jquery的验证插件jquery validation 是一款功能很强大的验证插件,下载地址http://bassistance.de/jquery-plugins/jquery-plugin-validation/。</style> <script> jQuery.extend(jQuery.va...
jQuery - 选择器
// 获取所有带有子元素或文本的td元素console.log($("td:parent"));// 获取所有不包含子元素或文本的td元素console.log($("td:empty"));// 获取包含带有val文本的td元素console.lo...
微信扫码,在手机上查看选中内容