HTML Table局部布局与浏览器兼容性

最新推荐文章于 2024-07-19 15:32:49 发布

guowh_soft

最新推荐文章于 2024-07-19 15:32:49 发布

阅读量271

点赞数

分类专栏： html 文章标签： html css

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

nsitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/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.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/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、总结：

产品列表页面的Table布局及样式
注册页面的Table布局及样式
浏览器兼容性怎样测试？
如何解决浏览器兼容性问题？

guowh_soft

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML Table局部布局与浏览器兼容性

nsitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 三像素文本慢移 #left{ float:left; width:100px; height:30px;
复制链接

扫一扫