0

静的divに合わせて動的divを使用する際に問題が発生します。最初はIE9そのものだと思っていたのですが、ChromeとFirefoxでテストしてみると、もっと大きな問題があることに気づきました。

私がやろうとしているのは、左側の動的divを右側の静的divに調整することですが、margin-leftとmargin-rightを使用して読んでいたことはそれを適切に処理していません。

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="css/base.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div class="container">
    <div class="Heading">aaaa</div>
    <div class="CharacterPanel"></div>
    <div class="content">aaa</div>
</div>

</body>

</html>

CSS：

div.container {
overflow: hidden;
width: 100%;
height: 100%;
body {
background-color: #000000;
div.Heading {
border-top-style: solid;
border-width: thin;
border-color: #000000;
background-color: #808080;
width: 100%;
height: 45px;
float: left;
border-right-style: solid;
overflow: hidden;
margin-left: -151px;
}
div.content {
overflow: auto;
border-width: thin;
border-color: #000000;
width: 100%;
height: 500px;
float: left;
background-color: #808080;
border-top-style: solid;
border-right-style: solid;
margin-left: -151px;
display: inline;
position: relative;
}
div.CharacterPanel {
border-width: thin;
border-color: #000000;
float: right;
width: 150px;
height: 550px;
background-color: #808080;
border-top-style: solid;
text-align: center;
margin-left: 0px;
margin-right: 0px;
}

この問題は、これら3つの特定のdivタグで発生します。HTMLページを表示すると、divが一致します。問題は、margin-leftが負に設定されているため、divタグ全体が左に151ピクセルシフトされているかのように動作し、151ピクセルまでのすべての文字を大文字にすることです。コンテナの隠されたオーバーフローへのページ外。

4

0 に答える 0