CSS работает хорошо на хроме, но не на firefox

Я создал страницу с ссылками imgs ее работа великолепна на хроме, но у меня проблема с хром и firefox. остальная часть сайта отлично работает только в этой области, не точной в 3-х веб-браузере. Я попытался найти здесь и через сеть, но не нашел никакой помощи http://saggiehaim.net/YSD/projects.html Это страница с проблемой. , как вы можете видеть по хром, он отлично работает, в отличие от двух другихCSS работает хорошо на хроме, но не на 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%, ли ширина: 33%? – jdog

Я сделал то, что вы сказали, его половина исправила его, теперь я вижу 3 pic каждой строки, но каждый браузер имеет свое собственное позиционирование. Теперь я обновлю свой код, чтобы вы могли видеть изменения. –

После того, как вы сбросили все поля и поля браузеров выше ie8, на самом деле не отличаются – jdog

Include/Обновление ниже CSS, чтобы сделать это !!!

Примечание: Я удалил display:table-cell; padding:2px; с идентификатора #pro h1.

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

Спасибо, сработало! Я сделал несколько изменений, чтобы он поместился правильно. спасибо большое! –

Одна вещь, которую я могу видеть, что в ваших #pro свойств h1 Ид, вы опечатка слово «переход». Вы писали:

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

Он должен сказать:

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

Google Chrome может быть достаточно умным, чтобы забрать эту ошибку, в то время как другие браузеры не могут. Сначала попробуйте исправить это и посмотрите, поможет ли это. индикаторный блок

источник

2014-09-25 02:58:08

эй, я сделал это, ничего не сделал , но спасибо в любом случае –

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; 
}

и добавить изображение и скользящую h1 в DIV

источник

2014-09-25 06:33:02

CSS работает хорошо на хроме, но не на firefox

ответ

Смежные вопросы