Html CSS在codePen中工作，但在实际浏览器中不工作？_Html_Css_Google Chrome

Html CSS在codePen中工作，但在实际浏览器中不工作？

html css google-chrome

Html CSS在codePen中工作，但在实际浏览器中不工作？,html,css,google-chrome,Html,Css,Google Chrome,我得到了一个代码笔中的工作解决方案。这是：但当我创建一个HTML文件时，如下所示： <html> <head> <style> .container { height: 100px; width: 100px; line-height: 100px; text-align: center; background-color: #ccc; margin: 20px; } .container img { max-

我得到了一个代码笔中的工作解决方案。
这是：

但当我创建一个HTML文件时，如下所示：

<html>
<head>
<style>
.container {
    height: 100px;
    width: 100px;

  line-height: 100px;
  text-align: center;
   background-color: #ccc;
   margin: 20px;
}

 .container img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}
</style>

</head>


<body>

<div class="container">
<img src="http://dummyimage.com/100x150/000/fff" />
</div>

<div class="container">
<img src="http://dummyimage.com/400x100/000/fff" />
</div>

<div class="container">
<img src="http://dummyimage.com/100x50/000/fff" />
</div>

</body>
</html>


.集装箱{
高度：100px；
宽度：100px；
线高：100px；
文本对齐：居中；
背景色：#ccc；
利润率：20px；
}
.集装箱img{
最大宽度：100%；
最大高度：100%；
垂直对齐：中间对齐；
}

虽然有相同的代码，但它不会给出相同的输出

帮助。

我有一个类似的问题：正如@user3790069所提到的，浏览器默认使用不同的CSS，这取决于是否声明了doctype

Codepen上的代码自动使用HTML5 doctype，除非您的文档以开头，否则您将丢失在Codepen上看到的一些样式。

那么您得到了什么？屏幕截图如何？@j08691或将少量代码复制到您自己的html文件中，然后自己查看？您忘记了

您是否清除了浏览器的缓存？ctrl+f5组合键几次？没有doctype的页面有时呈现方式不同（在怪癖模式下）