CSS在Chrome中有效，但在Firefox中损坏

Question

我用html和CSS编写了一个页面。 这是页面： https://wheelertechconsulting.com/page1.html

我使用chrome设计了此页面，当我将其上传到我的网站时，我在firefox中对其进行了检查，并注意到body div中的ul li条目被压缩到右侧。

什么可能导致此错误？

Answer 1

CSS文件中有很多错误

您的CSS文件中有6个错误和12个警告。

我用CSS online validator发现了它

尝试解决这些问题，也许可以解决此问题。

您可以看到问题所在以及它所在的行。

Answer 2

我找到了解决方案，但是您必须纠正我先前的回答中提到的错误

问题出在：

.featured-images li {
    padding: 0 auto 1% 1%;
    border: .2em solid black;
    margin: 1%;
    ! height: 8em; 
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s ease;
    background: linear-gradient(rgba(0, 255, 255, 0.8), rgba(0, 0, 255, 0.8));

}

如果您对代码的这一部分进行注释：! height: 8em;，问题将得到解决。

评论! height: 8em;前的下一张图片

但是在评论! height: 8em;之后，外观将如下所示 图片

这部分代码位于样式文件中的第101行。