blocks|key|2628375|text|CSS文件中有很多错误|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2628376|CSS文件中有6个错误和12个警告。|2628377|我用CSS+online+validator发现了它|offset|length|2628378|试着解决这些问题，也许可以解决这个问题。|2628379|您可以看到问题是什么，以及它会在哪一行。|2628380|​|2628381|📷|atomic|2628382|2628383|2628384|2628385|2628386|entityMap|0|LINK|mutability|MUTABLE|url|http://jigsaw.w3.org/css-validator/|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/018a02a2f755c530482c8343ad7eebe1.png|imageAlt|2|https://ask.qcloudimg.com/http-save/yehe-900000/6ad14e65f469cb442915a560fc8336dc.png^0|0|0|2|K|0|0|0|0|0|0|1|1|0|0|0|0|1|2|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1B|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1C|8|@]|9|@$F|1D|G|1E|1|1F]]|A|$]]|$1|H|3|I|5|6|7|1G|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1H|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1I|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|1J|8|@]|9|@$F|1K|G|1L|1|1M]]|A|$]]|$1|Q|3|M|5|6|7|1N|8|@]|9|@]|A|$]]|$1|R|3|M|5|6|7|1O|8|@]|9|@]|A|$]]|$1|S|3|O|5|P|7|1P|8|@]|9|@$F|1Q|G|1R|1|1S]]|A|$]]|$1|T|3|M|5|6|7|1T|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1U|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]|12|$5|13|Y|14|A|$15|16|17|-4]]|18|$5|13|Y|14|A|$15|19|17|-4]]]]

You have many errors in the CSS file

There is 6 errors and 12 warnings in your CSS file.

I used the <a href="http://jigsaw.w3.org/css-validator/" rel="nofollow noreferrer">CSS online validator</a> to discover it

Try to fix those problems, maybe solve this problem.

You can see what the problem is and what line it will be in.

<a href="https://i.stack.imgur.com/mOUBO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mOUBO.png" alt="enter image description here"></a>

<a href="https://i.stack.imgur.com/N5AEJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N5AEJ.png" alt="enter image description here"></a>

blocks|key|2418126|text|我找到了解决方案，但你必须纠正我上一个答案中提到的错误|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2418127|问题出在：|2418128|.featured-images+li+{
++++padding:+0+auto+1%25+1%25;
++++border:+.2em+solid+black;
++++margin:+1%25;
++++!+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));

}|code-block|syntax|javascript|2418129|如果您注释代码的这一部分:+!+height:+8em;+，则问题将得到解决。|CODE|2418130|评论!+height:+8em;之前的下一张图片|2418131|​|2418132|📷|atomic|2418133|2418134|，但在注释+!+height:+8em;+之后，外观将如下图所示|2418135|2418136|2418137|2418138|这部分代码在样式文件中的第101行|2418139|2418140|2418141|2418142|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/c1f739f38b11cd7b16caac2b11d11fd0.jpeg|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/db268dd0bcfac4b47336479599dd098a.jpeg|2|https://ask.qcloudimg.com/http-save/yehe-900000/478d91ebb0dc1240faac263894975860.png^0|0|R|0|0|0|0|D|E|E|T|A|E|E|0|2|E|0|0|0|1|0|0|0|0|5|6|E|6|E|0|0|0|1|1|0|0|0|0|0|1|2|0|0^^$0|@$1|2|3|4|5|6|7|1K|8|@$9|1L|A|1M|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1N|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1O|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1P|8|@$9|1Q|A|1R|B|C]|$9|1S|A|1T|B|C]|$9|1U|A|1V|B|C]|$9|1W|A|1X|B|O]]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1Y|8|@$9|1Z|A|20|B|O]]|D|@]|E|$]]|$1|R|3|S|5|6|7|21|8|@]|D|@]|E|$]]|$1|T|3|U|5|V|7|22|8|@]|D|@$9|23|A|24|1|25]]|E|$]]|$1|W|3|S|5|6|7|26|8|@]|D|@]|E|$]]|$1|X|3|Y|5|6|7|27|8|@$9|28|A|29|B|C]|$9|2A|A|2B|B|C]|$9|2C|A|2D|B|O]]|D|@]|E|$]]|$1|Z|3|S|5|6|7|2E|8|@]|D|@]|E|$]]|$1|10|3|U|5|V|7|2F|8|@]|D|@$9|2G|A|2H|1|2I]]|E|$]]|$1|11|3|S|5|6|7|2J|8|@]|D|@]|E|$]]|$1|12|3|13|5|6|7|2K|8|@]|D|@]|E|$]]|$1|14|3|S|5|6|7|2L|8|@]|D|@]|E|$]]|$1|15|3|U|5|V|7|2M|8|@]|D|@$9|2N|A|2O|1|2P]]|E|$]]|$1|16|3|S|5|6|7|2Q|8|@]|D|@]|E|$]]|$1|17|3|-4|5|6|7|2R|8|@]|D|@]|E|$]]]|18|$19|$5|1A|1B|1C|E|$1D|1E|1F|-4]]|1G|$5|1A|1B|1C|E|$1D|1H|1F|-4]]|1I|$5|1A|1B|1C|E|$1D|1J|1F|-4]]]]

I found the solution, but you must correct the mistakes mentioned in my previous answer

The problem is in :

<pre><code>.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));

}
</code></pre>

If you comment this part of the code : <code>! height: 8em;</code> the problem will be resolved.

Next image before comment <code>! height: 8em;</code>

<a href="https://i.stack.imgur.com/BAqRe.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BAqRe.jpg" alt="enter image description here"></a>

But after the comment <code>! height: 8em;</code> the appearance will become as in the following 
image

<a href="https://i.stack.imgur.com/LWE3i.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LWE3i.jpg" alt="enter image description here"></a>

This part of the code is in the style file at the line 101.

<a href="https://i.stack.imgur.com/7mefB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7mefB.png" alt="enter image description here"></a>

I have written a page in html and css. 
Here is the page: 
<a href="https://wheelertechconsulting.com/page1.html" rel="nofollow noreferrer">https://wheelertechconsulting.com/page1.html</a>

I designed this page using chrome and when i uploaded to my website, I checked it out in firefox and noticed that that the ul li entrys in the the body div are compressed to the right. 

What could be causing this error?

CSS Works in Chrome, but breaks in firefox

我已经用html和css写了一个页面。这是页面：我使用chrome设计了这个页面，当我上传到我的网站时，我在firefox中检出了它，并注意到body div中的ul li条目被压缩到了右边。导致此错误的原因可能是什么？

问CSS在Chrome中工作，但在firefox中中断
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS在Chrome中工作，但在firefox中中断EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS在Chrome中工作，但在firefox中中断
EN