CSS模板在所有浏览器中都不相同（重叠div）

debugcn 发表于 Dev

bgen

基本上我有2列，左侧有一个覆盖的灰色图像以创建一种模糊效果。当您将鼠标悬停在它上面时，它将变成透明的。它在Chrome / Safari中运行良好，但在Firefox中却无法运行，我真的不知道为什么。

我上传了一个链接到我的网站，以显示我的意思：

http://generowicz.nl/showing_template.html

在Firefox中查看时，覆盖的图像不适合并覆盖整个左侧。

html, body {
    height: 100%;
    margin: 0;
    font-size: 15px;
	font-family: Helvetica;
	font-weight: lighter;
}
#left{
	text-indent:1cm;
    width: 20%;
    height: 100%;
    position: fixed;
	background: rgba(51,51,51,1);
}

#right {
	padding-top:2cm;
    width: 80%;
    height: auto;
    position: absolute;
    right: 0;
    background: white;
}

#img {
	position: absolute;
	opacity: 0.4;
	width:100%;
	height:100%;
	pointer-events:none;
	-webkit-transition: opacity .25s ease-out;
	-moz-transition: opacity .25s ease-out;
	-o-transition: opacity .25s ease-out;
	transition: opacity .25s ease-out;
	color:#000;
}

#left:hover>#img {
  opacity: 0;
}

h1{
	font-size: 80px;
	color:#CCC;
}

h2 {
	font-size: 15px;
	color: #CCC;
	font-weight: lighter;
}

h3 {
	font-size: 15px;
	color:#CCC;
}

/* These are for main body */
h4 {
	font-size: 15px;
	color:#000;
}

h5 {
	font-size: 15px;
	color:#000;
	font-weight: lighter;
}
	


a.one:link {
	text-decoration: none;
	color: #CCC;
  -webkit-transition: all 0.5s ease-out;   Saf3.2+, Chrome 
     -moz-transition: all 0.5s ease-out;   FF4+ 
      -ms-transition: all 0.5s ease-out;   IE10 
       -o-transition: all 0.5s ease-out;   Opera 10.5+ 
          transition: all 0.5s ease-out;
}  

a.one:link:hover {
	text-decoration: none;
	color: #09F;
}

a.one:visited {
		text-decoration: none;
	color: #CCC;
  -webkit-transition: all 0.5s ease-out;   Saf3.2+, Chrome 
     -moz-transition: all 0.5s ease-out;   FF4+ 
      -ms-transition: all 0.5s ease-out;   IE10 
       -o-transition: all 0.5s ease-out;   Opera 10.5+ 
          transition: all 0.5s ease-out;
		  }
		  
a.one:visited:hover {
	text-decoration: none;
	color: #09F;
}
a.one:active {	text-decoration: none;
	color: #CCC;
  -webkit-transition: all 0.5s ease-out;   Saf3.2+, Chrome 
     -moz-transition: all 0.5s ease-out;   FF4+ 
      -ms-transition: all 0.5s ease-out;   IE10 
       -o-transition: all 0.5s ease-out;   Opera 10.5+ 
          transition: all 0.5s ease-out;
}

<body>
<div id="left"><img src="images/graysmall.png" name="img" width="93" height="55" id="img" />
  <h1> B </h1>
  <h2><a class="one" href="../index.html">Home</a></h2>
  <h2><a class="one" href="../about.html">About Me</a></h2>
  <h2><a class="one" href="../contact.html">Contact</a></h2>
</div>

<div id="right">


<table width="100%" border="0" align="left">
  <tr>
    <td width="5%">&nbsp;</td>
    <td width="95%" align="left" valign="top">
<!-- TemplateBeginEditable name="Content" -->
   
    
<!-- TemplateEndEditable -->
    </td>
  </tr>
</table>
</div>

</body>

Maniarasu V

在您的#img类中添加left：0将得到您需要的结果。请参阅下面的更新的类，

#img {
position: absolute;
opacity: 0.4;
width: 100%;
height: 100%;
pointer-events: none;
-webkit-transition: opacity .25s ease-out;
-moz-transition: opacity .25s ease-out;
-o-transition: opacity .25s ease-out;
transition: opacity .25s ease-out;
color: #000;
left: 0;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。