7

cssとjqueryでサイトを作っています。私のスクリプトの 1 つは、マウス クリックで特定の場所にテキストを表示することです。テキストは、Google Chrome で意図した位置に適切に表示されます。しかし、IE9 と FF17 では、意図した位置からずれています。私の背景画像は、ブラウザのウィンドウのサイズに収まるようになっています。

より良いアイデアを提供するスクリーンショットを添付しています。また、コードを書いています。ちょっとした調整が必要なだけかもしれませんが、私にはわかりません。これで私を助けてください。

chromeとIEの比較です。 右のものは右のものであるクロムです。 FF と IE は同じ位置に表示されます。 chromeとIEの比較です。右のものは右のものであるクロムです。FF と IE は同じ位置に表示されます。

ありがとう

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
*Here will my script which is just simple .show and .hide functions*
});
</script>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Train of Thought</title>

<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin-top: 0px;
padding-top: 0px;
top: 0px;
margin-left: 0px;
padding-left: 0px;
left: 0px;
}

body {
overflow: hidden;
}

#background {width: 100%; height: 100%; display: block; position: absolute; z-index:1;}

.content {
visibility:hidden;
border-style: none;
display: block;
position: fixed;
text-align: centre;
z-index: 1;
margin-top: 40%;
background-color: transparent;
font-size:1.5em;
opacity: 0.697;
}

#thought_text{
margin-left: 25%;
margin-right: 25%;
}


<div><img id="background" alt="background" src="tot1.png"></div>

<div class="content" id="thought_text">Here goes the text<br></div>
4

6 に答える 6

1

要素を垂直方向にセンタリングするために IE9 で機能する簡単なハックがあります。プロパティを使用して、transform: translateY別の要素内の要素を調整します。次のように、内部要素にクラスを適用できます。

.element {
   position: relative;
   top: 50%;
   transform: translateY(-50%);
}

適切なベンダー プレフィックスを追加する必要があります。これに関する素晴らしい記事は次のとおりです。http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

于 2014-01-20T08:58:46.773 に答える
1

まず、位置を固定するには、, , の代わりに , top,属性を使用します。bottomleftrightmargin-topmargin-right

次に、兄弟に同じz-index'es を適用しました。

第三に、imgこのように背景に要素を使用することは最善の解決策ではありません。100% に拡張された CSS background-imageforbodyまたは text-div ラッパーを使用する必要があります。

完全なソリューション:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Here will my script which is just simple .show and .hide functions*
});
</script>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Train of Thought</title>

<style type="text/css">
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-image:url(http://25.media.tumblr.com/6d28260f10f17c0d2eab47398fd855f6/tumblr_mj9ha54DuW1rub5xuo1_1280.jpg);
background-position: top center;
background-repeat:no-repeat;
}
.content {  
top: 40%;
display: block;
position: fixed;
text-align: centre;
z-index: 1;
background-color: transparent;
font-size:1.5em;
opacity: 0.697;
border-style: none;
}

#thought_text{
left: 25%;
right: 25%;
color:#000;
}

</style>

<body>

<div class="content" id="thought_text">Here goes the text<br></div>

</body>

</head>
于 2014-03-24T15:10:44.443 に答える
0

属性値の上書きを避けるため#thought_text{}に、css ファイル内のブロックを削除し、ブロック内で結合することを検討してください.content {}

また

属性に !important ディレクティブを追加する

そしてまた変わる

margin-top: 40%;margin-top: 250px;すべてのブラウザでトップの位置が同じになるようにするなどの固定値にします。

于 2012-12-24T11:21:06.907 に答える
0

これは単なるアイデアです。役に立つことを願っています。 

<style>
    #background {
        background:url('tot1.png') no-repeat;
        width: 100%;
        height: 100%; 
        position: absolute; 
        z-index:1;
    }
</style>
<div id="background">
    <div class="content" id="thought_text">Here goes the text<br></div>
</div>
于 2013-01-14T16:11:49.187 に答える
0

私が理解しているように、画像をページ全体に拡大し、ブロックをテキストで中央に配置したいと考えています。50% の幅 (両側から 100% - 25% の余白) と 40% の上部の余白があります。

position:fixedページに対する位置を設定するための top および left プロパティがあります。

.content {
  position:fixed; /* taking it over the page */
  z-index:2; /* and over the image */
  left:25%; /* move to 25% from left */
  width:50%; /* and setting width */
  top:40%; /* move to 40% from top */

  font-size:1.5em;
  opacity: 0.697;
}

そして、あなたは削除することができます

#thought_text{
  margin-left: 25%;
  margin-right: 25%;
}

上/下のマージンとパーセント単位のパディングは、仕様に従って高さではなく幅から計算されるため、元のバグが発生します。

于 2013-01-14T16:00:40.773 に答える
-1

少しの JavaScript を使用して、IE または Firefox が存在するかどうかを検出し、それに応じてテキストのマージン/位置を変更できます。

    関数detectBroser（）{
        if (navigator.userAgent.indexOf("Firefox")!=-1)
            「Firefox」を返します。
        else if (navigator.userAgent.indexOf("MSIE")!=-1)
            「Internet Explorer」を返します。
    }
于 2013-01-21T12:02:34.800 に答える