zoukankan      html  css  js  c++  java
  • 绝对定位的元素在IE6下莫名丢失解决办法

    前几天做春运的页面时遇到的一个问题.

    下面为形成此问题的代码:

    <style>
    .wrap
    {position:relative;width:400px;height:300px;border:1px solid #000;}
    .box
    {background:red;width:100px;height:200px;position:absolute;left:50px;top:100px;}
    .test1
    {background:green;width:200px;height:100px;float:left;}
    .test2
    {background:blue;width:200px;height:100px;float:left;}
    </style>
    <div class="wrap">
    <div class="box">123456789</div>
    <div class="test1">abc</div>
    <div class="test2">def</div>
    </div>

    此时.class名为"box"的元素在IE6下完全不见了.

    经过测试.发现这个问题的形成条件:

    1.box为绝对定位的元素.

    2.box的相邻元素都为浮动元素.

    3.相邻浮动元素的宽之和>=其父级元素的宽.

    解决办法:

    1.设置其相邻浮动元素的margin;

    .test1{background:green;width:200px;height:100px;float:left;margin-right:-3px;}

    2.在box外层加一层position:relative的包裹.

    <style>
    .wrap
    {position:relative;width:400px;height:300px;border:1px solid #000;}
    .add-wrap
    {position:relative;}
    .box
    {background:red;width:100px;height:200px;position:absolute;left:50px;top:100px;}
    .test1
    {background:green;width:200px;height:100px;float:left;}
    .test2
    {background:blue;width:200px;height:100px;float:left;}
    </style>
    <div class="wrap">
    <div class="add-wrap">
    <div class="box">123456789</div>
    </div>
    <div class="test1">abc</div>
    <div class="test2">def</div>
    </
    div>

    在网上看到别人还有很多其他的解决这个问题的办法.

    例如插入空白DIV等.

    但个人觉得还是第二种方法最好.

  • 相关阅读:
    渗透测试靶场
    Ubuntu kylin优麒麟下配置Hadoop环境
    虚拟机win+IIs+asp+access搭建网站过程
    百度增强搜索
    渗透入门——术语概述
    api如何获取cookie
    还在纠结接口文档的事儿呢?
    为什么需要API管理平台
    自动生成接口文档的三种方式
    轻量化API测试工具整理
  • 原文地址:https://www.cnblogs.com/weinan/p/2307587.html
Copyright © 2011-2022 走看看