Question

我在Codepen中找到了一个有效的解决方案here 这是：http://codepen.io/anon/pen/NPgege

但是当我创建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>

虽然具有相同的代码，但它没有给出相同的输出帮助

Answer 1

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

Codepen上的代码会自动使用HTML 5文档类型，除非您的文档以<!DOCTYPE html>开头，否则您将缺少可在codepen上看到的某些样式。

CSS在codePen中工作但在实际浏览器中没有？

1 个答案: