0

私はすでにこの質問をしましたが、具体的な答えは得られませんでした。だから私は質問の簡略化されたバージョンを尋ねると思った

ウェブサイトを作成していて、div を特定の高さに配置したいと考えています。ブラウザウィンドウのサイズが変更され、divがそのpxにとどまるように、マージントップをpx単位で設定することはできません。これを % で指定しました。margin-top が px の場合、すべてのブラウザーで問題ありませんが、% の場合、IE9 IE10 と FF はおかしな動作をします。

以下のコードは非常に単純で、難しいことは何もありません。cssのリセットも試しましたがダメでした。誰でも少し時間を割いて、これで私を助けてくれませんか。

現在、インターネットからではなくハードディスクからページをロードしています。

ありがとう

> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Train of Thought</title>
  <style type="text/css">

div.content {
  height:200px;
  visibility:visible;
  border-style: none;
  display: block;
  position: fixed;
  text-align: center;
  z-index: 1;
  padding-top: 0px;
  border-top: 0px;
  padding-bottom: 0px;
  border-bottom: 0px;
  background-color: #00FFFF;
  font-family:Arial,sans-serif;
  overflow: auto;
  margin-left: 23%;
  margin-right:25%;
  font-size:150%;
  margin-top: 40%;
}
  </style>
</head>
<body>

<div class="content">This div is supposed to be same in all the browsers. but thisis different in them. IE9 and FF display it in lower bottom of the page while chrome displays in the middle.
<br>This div is supposed to be same in all the browsers. but thisis different in them. IE9 and FF display it in lower bottom of the page while chrome displays in the middle.
</div>

</body>
</html>
4

3 に答える 3

1

「おかしな動作」を意味する場合、ブラウザのサイズを変更したときにdivが動的に位置を調整しないことを意味する場合、その理由はそれを配置する方法です。

位置を固定に設定しました。つまり、マージンではなく、上、下、左、右で正確な位置を定義します。

于 2012-12-26T13:40:17.120 に答える
1

HTML:

<div class="wrapper">
<div class="content">This div is supposed to be same in all the browsers. but thisis different in them. IE9 and FF display it in lower bottom of the page while chrome displays in the middle.
<br>This div is supposed to be same in all the browsers. but thisis different in them. IE9 and FF display it in lower bottom of the page while chrome displays in the middle.
</div>
</div>

CSS:

.wrapper {
position:relative;
top:0;
left:0;
width:1020px;
height:760px;
}
.content {
position:absolute;
top: /* you set it */
left: /* you set it */
/* other props */
}
于 2012-12-26T13:46:11.530 に答える
1

私が指摘したように、margin-topディレクティブは親要素の幅からパーセンテージを計算するようです。しかし、topディレクティブについてはそうではありません。したがって、単純に次のように変更します。

margin-top: 40%;

に：

top: 40%;

これを Firefox、Chrome、IE8 で試しましたが、すべて同じように動作しました。

于 2012-12-26T13:55:05.927 に答える