7

我正在用 css 和 jquery 制作一个网站。我的脚本之一是通过鼠标单击在特定位置显示文本。文本在谷歌浏览器中的预期位置显示良好。但在 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

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

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

第三，img以这种方式使用元素作为背景并不是最好的解决方案。您应该选择 CSS background-imageforbody或 text-div 包装器，拉伸到 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>
于 2014-03-24T15:10:44.443 回答
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/

于 2014-01-20T08:58:46.773 回答
0

据我了解，您将图像拉伸到整个页面并希望将您的块与文本居中。你有 50% 的宽度（100% - 25% 的边距）和 40% 的上边距。

有了position:fixedtop 和 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%;
}

您会得到原始错误，因为顶部/底部边距和填充百分比是根据spec从宽度而不是高度计算的。

于 2013-01-14T16:00:40.773 回答
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

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

或者

将 !important 指令添加到属性

也改变

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

于 2012-12-24T11:21:06.907 回答
-1

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

    函数检测布鲁泽（）{
        if (navigator.userAgent.indexOf("Firefox")!=-1)
            返回“火狐”；
        否则 if (navigator.userAgent.indexOf("MSIE")!=-1)
            返回“Internet Explorer”；
    }
于 2013-01-21T12:02:34.800 回答