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

【问题标题】：different text positions in chrome. IE and FFchrome中不同的文本位置。 IE和FF
【发布时间】：2012-12-10 16:54:53
【问题描述】：

我正在用 css 和 jquery 创建一个网站。我的脚本之一是通过鼠标单击在特定位置显示文本。文本在谷歌浏览器中的预期位置显示良好。但在 IE9 和 FF17 中，它们偏离了预期的位置。我的背景图片适合浏览器窗口的大小。

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

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

【问题讨论】：

您是否已将 reset.css 添加到您的样式表和供应商前缀中？这似乎是一个兼容性问题！
位置：相对缺失。添加相对位置..

标签： html css internet-explorer google-chrome

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

其次，您已将相同的z-index'es 应用于兄弟姐妹。

第三，以这种方式使用img 元素作为背景并不是最好的解决方案。你应该使用 CSS background-image 来代替 body 或 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>

【讨论】：

【解决方案3】：

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

或

在属性中添加 !important 指令

还有变化

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

【讨论】：

【解决方案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%;
}

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

【讨论】：

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

【讨论】：

【解决方案6】：

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

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

【讨论】：

浏览器嗅探仍然很糟糕。
马克 - 是的，但我想不出其他办法。