div与文本在另一个,没有与IE8结束

时间:2012-02-01 15:31:13

标签: css internet-explorer internet-explorer-8 textblock

我有两个div,左边是右边的一个。我需要左边的块才能越过右边。如你所知IE仍然是问题......两个块中的文本是混合的,没有处理过,文本似乎是无法理解的。

jsfiddle http://jsfiddle.net/P3Qgb/

这里是代码:

<html>
    <style>
            #root {
                position:fixed;
            }

        #content {
          height: 200px;
          width: 400px;
          border: 1px solid red;    
          position:fixed;
        }    

        #bloc-left {
                position:absolute;
                float: left;
                height: 190px;
                border: 1px solid black;
                width: 60%;
                overflow:auto;

                background-image: linear-gradient(top, #fbfbfb 0%, #e2e2e2 100%);
                background-image: -o-linear-gradient(top, #fbfbfb 0%, #e2e2e2 100%);
                background-image: -moz-linear-gradient(top, #fbfbfb 0%, #e2e2e2 100%);
                background-image: -webkit-linear-gradient(top, #fbfbfb 0%, #e2e2e2 100%);
                background-image: -ms-linear-gradient(top, #fbfbfb 0%, #e2e2e2 100%);
                background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fbfbfb), color-stop(1, #e2e2e2));
        }

        #bloc-right {
                float: right;
                width: 45%;
                height 190px;
                border: 1px solid black;
        }    
    </style>

    <body>
            <div id=""root">
            <div id="content">
             <div id="bloc-left">
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
             </div>
          <div id="bloc-right">
              Lorem Ipsum is simply dummy text of the printing and typesetting 
          </div>
      </div>
        </div>

    </body>
</html>

目标是添加一个链接,该链接在右侧展开左侧块,并带有一些js。

感谢您的帮助!

编辑:添加根div

1 个答案:

答案 0 :(得分:0)

添加:

z-index: 1;#bloc-left

变化:

position: fixed;

上的{p> position: relative;#content