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

Question

我正在建立一个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>

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元素作为背景并不是最好的解决方案。 你应该为body或text-div包装器寻找CSS background-image ，拉伸到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，因为百分比的上/下边距和填充根据规格从宽度而不是高度计算。

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 个解决方案

解决方案1
1 2014-01-20 08:58:46

解决方案2
1 2014-03-24 15:10:44

解决方案3
0 2012-12-24 11:21:06

解决方案4
0 2013-01-14 16:00:40

解决方案5
0 2013-01-14 16:11:49

解决方案6
-1 2013-01-21 12:02:34

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

问题描述

6 个解决方案

解决方案1 1 2014-01-20 08:58:46

解决方案2 1 2014-03-24 15:10:44

解决方案3 0 2012-12-24 11:21:06

解决方案4 0 2013-01-14 16:00:40

解决方案5 0 2013-01-14 16:11:49

解决方案6 -1 2013-01-21 12:02:34

解决方案1
1 2014-01-20 08:58:46

解决方案2
1 2014-03-24 15:10:44

解决方案3
0 2012-12-24 11:21:06

解决方案4
0 2013-01-14 16:00:40

解决方案5
0 2013-01-14 16:11:49

解决方案6
-1 2013-01-21 12:02:34