Question

我正在制作一个包含css和jquery的网站。我的一个脚本是在鼠标单击的特定位置显示文本。文本在谷歌浏览器的预定位置显示良好。但是在IE9和FF17中，它们从预定的位置移开。我的背景图像适合浏览器窗口的大小。

我附上截图，这将提供更好的主意。我也在写代码。也许只需要一个小的调整，但我不明白。请帮助我。

This is the comparison between chrome and IE. the right one is chrome which is the right one. FF and IE display at same positions. 这是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>

Answer 1

有一个简单的hack可以在IE9中用于垂直居中元素。它使用transform: translateY属性调整另一个元素中的元素。我们可以像这样在内部元素中应用一个类：

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

您需要添加适当的供应商前缀。这是一篇很棒的文章：http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Answer 2

首先，对于固定定位，请使用：top，bottom，left，right属性而不是margin-top，margin-right ..

其次，您已经对兄弟姐妹应用了相同的z-index。

第三，以这种方式使用img元素作为背景并不是最好的解决方案。你应该为background-image或text-div包装器寻找CSS body，扩展到100％。

完整解决方案：

<!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>

Answer 3

考虑删除css文件中的#thought_text{}块并将其组合在.content {}块中以避免覆盖属性值

或

将！important指令添加到属性

并且还要更改

margin-top: 40%;改为某些固定值，例如margin-top: 250px;，可确保所有浏览器中的顶部位置相同。

Answer 4

据我所知，您将图像拉伸到整页，并希望将文本块居中。您有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%;
}

你得到原始的bug，因为根据spec，上/下边距和百分比填充从宽度计算而不是高度。

Answer 5

这只是一个想法，希望有用。

<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>

Answer 6

您可以使用一些javascript来检测IE或Firefox是否存在，然后相应地更改文本的边距/位置。


    function detectBroser(){
        if (navigator.userAgent.indexOf("Firefox")!=-1)
            return "Firefox";
        else if (navigator.userAgent.indexOf("MSIE")!=-1)
            return "Internet Explorer";
    }

chrome中的不同文本位置。 IE和FF

6 个答案: