Safari浏览器重叠DIV内容

时间:2017-09-13 10:00:44

标签: css

我不是专家级开发人员,对CSS的了解有限。我在Safari和Internet Explorer 10 +中遇到重叠问题。

在Firefox,Google Crome和Opera中,我的代码工作得很好但是在 Safari和IE - 文本重叠。

请提供一整套CSS代码,因为我不太了解它。

我的代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: 
border-box; box-sizing: border-box; }
*{box-sizing: border-box; padding: 0; margin: 0;}

body { margin: 0;}
footer { border: 1px solid #ccc; padding: 1.25em; background-color: #c0c0c0; 
}

.max-width {max-width: 1400px; margin: 0 auto;}
.site-container  { position: relative; margin: .5em; } 
.left-column {  border: 2px solid #ccc; padding: 0.40em; }
.right-column { border: 0px solid #ccc; padding: 1.25em; background-color: 
#ffffff; }


.floating-inline{display: inline-block;vertical-align: middle;}
.nav { list-style: none; margin-left: 0; margin-bottom: 0; padding-left: 0; 
}


img {
max-width: 100%;
height: auto;
}


 header{position: fixed; left: 0; top: 0; width: 100%; height: 70px; 
 background: #6633cc; z-index: 3; color: #fff; text-align:center; font-size: 
 20px; padding: 10px 0;}  

 .panel{ height: 100%; position: absolute; top: 0 }

 .center{padding:0px 190px 0 207px; position: absolute; width:100%; top: 0; 
  left: 0; background: #ffff99; overflow-y:scroll}

 .left{ padding: 5px 0 0 0; left: 0; width:200px; background: #0f0; z-
  index:2;}

  .right{ padding: 5px 0 0 0; right: 0; width: 200px; background: #f00; z-
  index:2;}


  @media (max-width: 1024px) {
  .left { display: none; }
  .right { display: none;  }
  .center{padding:0px 6px 0 10px; position: absolute; width:100%; top: 0; 
   left: 0; background: #ccffcc; overflow-y:scroll}
   }

  /* MEDIA QUERIES */
  @media screen and (min-width: 47.5em )
  {

    .left-column { margin-right: 22.5em; }
    .right-column { position: absolute; top: 0; right: 0; width: 21.75em; }
  }

  </style>
  </head>
  <body>

   <header>
   Nevigation Menus Goes here <br>
   Menu 1 , Menu 2, Menu 3 <br>
   </header>

    <nav class="left panel" align="center">
    <br><br><br> <img src="196 x1000-Left.jpg" width="196" height="650" 
     border="0" alt="img"> 
     </nav>
     <aside class="right panel" align="center">
<br><br><br>
<img src="196 x1000-Left.jpg" width="196" height="650" border="0" alt="img">
 </aside>

  <section class="center panel"> <br><br><br><br><br>
    <div class="max-width">
        <div class="site-container">
            <main class="left-column">
                <h2>Left Column (fluid)</h2><br>

               <p align="justify" >
               <b>1st Para </b> : 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
               <br> <br>    

               <b>2nd Para </b>: 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
               <br> <br>    
               <br> <br>

               <b>3rd Para </b>: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
               <br> <br>

               <b>4th Para </b> :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
               <br> <br>

               <b>5th Para </b> : 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</p>


            </main>

            <aside class="right-column">
                <h2>Right Column</h2><br>
                <h4> This Flots below Left Column while resizing </h4>
                <br>
                <p align="justify">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</p>

                <br>
             </aside>
        </div>
    <footer>
    <div id="my_menu" align="center">
    <a href="#" class="current">Home</a> &nbsp; | <a href="#">Bloggs</a> 
   &nbsp;  | <a href="#">Contact</a>

  </div>
  </footer>

  </div>  
  </section>

  </body>
  </html>

问题快照:https://i.stack.imgur.com/PLcQd.jpg

1 个答案:

答案 0 :(得分:0)

最后我得到了答案......这很简单......只有一个字......

删除

<main class="left-column">

以上 -     左列(流体)

只需添加

<aside class="full-width-aside left-column">

全部。它终于解决了我的问题