CSS在Chrome浏览器上效果不错，但不是在Firefox上

我创建了一个带有imgs链接的页面它在Chrome上的工作非常棒，但是我遇到了Chrome和Firefox的问题。该网站的其他部分完美地工作，只有这个区域在3浏览器中不准确。我试图在这里和网上搜索，但无法找到任何帮助 http://saggiehaim.net/YSD/projects.html 这是与问题的页面。正如你可以看到铬的工作很不像其他两个CSS在Chrome浏览器上效果不错，但不是在Firefox上

感谢您的时间和善良的帮助！

这里是我的代码：“转型”

#pro { 
 
\t width:960px; 
 
\t display:block; 
 
\t margin:0 auto; 
 
} 
 
#pro ul { 
 
\t width:100%; 
 
\t margin: 0 auto; 
 
\t text-align: center; 
 
} 
 
#pro li { 
 
\t width:33%; 
 
    display: inline-block; 
 
\t margin:40px 0; 
 
} 
 
#pro img { 
 
\t width:204px; 
 
\t height:204px; 
 
\t -webkit-box-shadow: 0px 0px 53px 16px rgba(164,207,56,0.29); 
 
\t -moz-box-shadow: 0px 0px 53px 16px rgba(164,207,56,0.29); 
 
\t -ms-box-shadow: 0px 0px 53px 16px rgba(164,207,56,0.29); 
 
\t box-shadow: 0px 0px 53px 16px rgba(164,207,56,0.29); 
 
\t border: 5px solid white; 
 
} 
 
#pro img:hover 
 
{ 
 
\t -webkit-box-shadow: 0px 0px 40px 16px rgba(0,51,23,1); 
 
\t -moz-box-shadow: 0px 0px 40px 16px rgba(0,51,23,1); 
 
\t -ms-box-shadow: 0px 0px 40px 16px rgba(0,51,23,1); 
 
\t box-shadow: 0px 0px 40px 16px rgba(0,51,23,1); 
 
} 
 
#pro h1 { 
 
\t display: table-cell; 
 
\t padding:2px; 
 
\t background-color:#FFF; 
 
\t font-size: 1.5em; 
 
\t position: relative; 
 
\t top: -40px; 
 
\t right:-98px; 
 
\t width: 204px; 
 
\t -webkit-transition: all 300ms ease-out; 
 
\t -moz-transition: all 300ms ease-out; 
 
\t -ms-transition: all 300ms ease-out; 
 
\t transition: all 300ms ease-out; 
 
\t opacity:0; 
 
\t color:#060; 
 
} 
 
    
 
#pro li:hover h1 { 
 
\t -moz-transform: translateX(-43px); 
 
\t -webkit-transform: translateX(-34px); 
 
\t -ms-transform: translateX(-43px); 
 
\t transform: translateX(-43px); 
 
\t opacity:1; 
 
} 
 

 
#pro h2 { 
 
\t margin-top:-55px; 
 
} 
 
#pro a { 
 
\t text-decoration:none; 
 
}

<div id="pro"> 
 
    \t <ul> 
 
    \t \t <li> 
 
      \t <a href="projects/project1/pro1.html"><img src="img/prv1.jpg" alt="project 1"><h1>הכנס לפרוייקט</h1><br><h2>פרוייקט לדוגמא</h2></a></li> 
 
    \t \t <li> 
 
      \t <a href="projects/project2/pro2.html"><img src="img/prv1.jpg" alt="project 1"><h1>הכנס לפרוייקט</h1><br><h2>פרוייקט לדוגמא</h2></a> 
 
      </li> 
 
      <li> 
 
      \t <a href="projects/project3/pro3.html"><img src="img/prv1.jpg" alt="project 1"><h1>הכנס לפרוייקט</h1><br><h2>פרוייקט לדוגמא</h2></a> 
 
      </li> 
 
      <li> 
 
      \t <a href="projects/project4/pro4.html"><img src="img/prv1.jpg" alt="project 1"><h1>הכנס לפרוייקט</h1><br><h2>פרוייקט לדוגמא</h2></a> 
 
      </li> 
 
      <li> 
 
      \t <a href="projects/project5/pro5.html"><img src="img/prv1.jpg" alt="project 1"><h1>הכנס לפרוייקט</h1><br><h2>פרוייקט לדוגמא</h2></a> 
 
      </li> 
 
      <li> 
 
      \t <a href="projects/project6/pro6.html"><img src="img/prv1.jpg" alt="project 1"><h1>הכנס לפרוייקט</h1><br><h2>פרוייקט לדוגמא</h2></a> 
 
      </li> 
 
      <li> 
 
      \t <a href="projects/project7/pro7.html"><img src="img/prv1.jpg" alt="project 1"><h1>הכנס לפרוייקט</h1><br><h2>פרוייקט לדוגמא</h2></a> 
 
      </li> 
 
      <li> 
 
      \t <a href="projects/project8/pro8.html"><img src="img/prv1.jpg" alt="project 1"><h1>הכנס לפרוייקט</h1><br><h2>פרוייקט לדוגמא</h2></a> 
 
      </li> 
 
      <li> 
 
      \t <a href="projects/project9/pro9.html"><img src="img/prv1.jpg" alt="project 1"><h1>הכנס לפרוייקט</h1><br><h2>פרוייקט לדוגמא</h2></a> 
 
      </li> 
 
     </ul> 
 
    </div>

来源

2014-09-25 Saggie Haim

出发了，你可以把h1和h2出的，其无效。使href绝对定位，100％的高度/宽度。可能尝试ul宽度100％，li宽度：33％？ – jdog 2014-09-25 02:55:02

我做了你所说的，它的一半固定它，现在我看到每行3个图片，但每个浏览器都有他自己的定位.. 我现在将更新我的代码，以便您可以看到更改。 – 2014-09-25 03:05:46

一旦你重置所有填充和页边距IE8上面的浏览器实际上没有不同 – jdog 2014-09-25 03:07:56

包含/更新以下css来完成它添加图片和滑动H1！

注意：我已从#pro h1中删除display:table-cell; padding:2px;。

的CSS：

h1, h2, ul, li{ 
    margin:0; 
    padding:0; 
} 
#pro h1 { 
    background-color: #FFF; 
    font-size: 1.5em; 
    position: relative; 
    top: -80px; 
    right: -88px; 
    width: 204px; 
    -webkit-transition: all 300ms ease-out; 
    -moz-transition: all 300ms ease-out; 
    -ms-rransition: all 300ms ease-out; 
    transition: all 300ms ease-out; 
    opacity: 0; 
    color: #060; 
}

来源

2014-09-25 10:06:49 Aru

感谢它的工作！我做了一些改变，所以它会适合的权利。非常感谢！ – 2014-09-25 11:15:45

一两件事，我可以看到的是，在你的#pro H1 ID属性，你拼错单词你写的：

-ms-rransition: all 300ms ease-out;

应该说：

-ms-transition: all 300ms ease-out;

谷歌浏览器可能是足够聪明，拿起错误，而其他浏览器可能不会。先尝试修复它，看看它是否有帮助。

来源

2014-09-25 02:58:08

嘿，我做到了，没有影响任何东西，但任何方式感谢 – 2014-09-25 03:04:42

I have changed CSS and it works perfect on Mozilla as well on Chrome. 
I hope this will help you. 

#pro { 
    width:960px; 
    display:block; 
    margin:0 auto; 
} 
#pro ul { 
    width:100%; 
    margin: 0 auto; 
    text-align: center; 
} 
#pro li { 
    width:33%; 
    display: inline-block; 
    margin:40px 0; 
     position:relative; 
} 
#pro img { 
    width:204px; 
    height:204px; 
    -webkit-box-shadow: 0px 0px 53px 16px rgba(164,207,56,0.29); 
    -moz-box-shadow: 0px 0px 53px 16px rgba(164,207,56,0.29); 
    -ms-box-shadow: 0px 0px 53px 16px rgba(164,207,56,0.29); 
    box-shadow: 0px 0px 53px 16px rgba(164,207,56,0.29); 
    border: 5px solid white; 
} 
#pro img:hover 
{ 
    -webkit-box-shadow: 0px 0px 40px 16px rgba(0,51,23,1); 
    -moz-box-shadow: 0px 0px 40px 16px rgba(0,51,23,1); 
    -ms-box-shadow: 0px 0px 40px 16px rgba(0,51,23,1); 
    box-shadow: 0px 0px 40px 16px rgba(0,51,23,1); 
} 
#pro h1 { 
    display: table-cell; 
    padding:2px; 
    background-color:#FFF; 
    font-size: 1.5em; 
    position: absolute; 
    top: 199px; 
    right:0px; 
    width: 204px; 
    -webkit-transition: all 300ms ease-out; 
    -moz-transition: all 300ms ease-out; 
    -ms-transition: all 300ms ease-out; 
    transition: all 300ms ease-out; 
    opacity:0; 
    color:#060; 
} 

#pro li:hover h1 { 
    -moz-transform: translateX(-43px); 
    -webkit-transform: translateX(-34px); 
    -ms-transform: translateX(-43px); 
    transform: translateX(-43px); 
    opacity:1; 
} 

#pro h2 { 
    margin-top:-55px; 
} 
#pro a { 
    text-decoration:none; 
     float:left; 
}

来源

2014-09-25 05:37:19 Sharanpreet

外接显示器块该类

#pro a { 
    display: block; /*** new added***/ 
    text-decoration: none; 
}

和一个div

来源

2014-09-25 06:33:02

CSS在Chrome浏览器上效果不错，但不是在Firefox上

回答

相关问题