CSS 在 chrome 上运行良好，但在 Firefox 上不行答案

【问题标题】：CSS works good on chrome but not on firefoxCSS 在 chrome 上运行良好，但在 Firefox 上不行
【发布时间】：2014-11-19 16:49:10
【问题描述】：

我创建了一个带有 imgs 链接的页面它在 chrome 上工作得很好，但我对 chrome 和 firefox 有问题。该网站的其余部分工作完美，只有这个区域在 3 网络浏览器中不准确。我试图在这里和网上搜索，但找不到任何帮助 http://saggiehaim.net/YSD/projects.html 这是有问题的页面。正如您在 chrome 上看到的，它的工作原理与其他两个不同

感谢您的宝贵时间和热心帮助！

这是我的代码：

#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;
}
#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: relative;
	top: -40px;
	right:-98px;
	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;
}

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

【问题讨论】：

开始，你能把h1和h2从中取出来吗，它是无效的。使 a href 绝对定位，100% 高度/宽度。可以试试 ul width 100%, li width: 33%?
我按照你说的做了，修复了一半，现在我每行看到 3 张图片，但每个浏览器都有自己的定位。我现在将更新我的代码，以便你看到更改。跨度>
一旦你重置了所有的内边距和外边距，ie8以上的浏览器其实并没有什么不同
如果我将 a href 设置为绝对定位，它会使页面变得一团糟。

标签： html css google-chrome cross-browser

【解决方案1】：

给这个类添加显示块

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

并在 div 中添加图像和滑动 h1

【讨论】：

【解决方案2】：

包含/更新下面的 css 来完成它！！！

注意：我已经从 ID #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;
}

【讨论】：

感谢它的工作！我做了一些改变，所以它会很合适。非常感谢！

【解决方案3】：

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

【讨论】：

【解决方案4】：

我可以看到，在您的#pro h1 id 属性中，您拼错了“transition”一词。你写过：

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

应该说：

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

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

【讨论】：