-2
我不是专家开发人员，对CSS的知识有限。我在Safari和Internet Explorer 10+中遇到重叠问题。Safari浏览器重叠DIV内容
在Firefox，谷歌克罗默和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> | <a href="#">Bloggs</a>
| <a href="#">Contact</a>
</div>
</footer>
</div>
</section>
</body>
</html>
的问题快照：https://i.stack.imgur.com/PLcQd.jpg
好了，你有更多的问题。诸如'