-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
好了，你有更多的問題。諸如'