兼容ie6的问题----定位(块级元素示例【独占一行】)

最新推荐文章于 2023-10-30 10:44:58 发布

way_ay_ay

最新推荐文章于 2023-10-30 10:44:58 发布

阅读量323

点赞数

分类专栏：前端之css 文章标签：兼容ie6 display position

本文链接：https://blog.csdn.net/way_ay_ay/article/details/50402384

版权

前端之css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

关于编写div+css代码后，出现了不忍直视的“乱动”结果，苦恼了半天，发现原来是定位的问题。

html Demo代码:

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        body {
            padding: 0px;
            margin: 0px;
            width: 100%;
            height: 100%;
        }
        .box1,.box2 {
            width: 500px;
            height: 100px;
            display: inline-block;
            float: left;
            *display: inline;
            *float: left;
        }
        .box1 {
            background-color: red;
            position: relative;
        }
        .box2 {
            background-color: yellow;
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

实现大家可以自己试一试。

*display: inline;
*float: left;
前面加*表示兼容ie6 （可以说是让ie6认识这个特性的一种语法）
对于position与display适应的情况有不同的用法，对于基础可以查阅相关资料。

way_ay_ay

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录