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上

回答

相關問題