为什么 semantic-ui 的 comment 组件会拉长头像图片？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2463 天前的主题，其中的信息可能已经有所发展或是发生改变。

我在使用 semantic-ui 官方 api document 上 https://semantic-ui.com/views/comment.html 里的 demo，但是发现官方 demo 导致了图片被拉长。

最小可复现 demo 可在 jsfiddle 上看到： https://jsfiddle.net/9gmzvk2p/ 在 jsfiddle 上这个 demo 的效果是正常的，但把代码拿出来在 chrome 中渲染的结果是头像被疯狂拉长—— IE 中渲染的结果也一样。

我尝试了把里面的 js 代码全都注释掉(包括 jquery 和 semantic-ui 的 js)，但效果依旧，个人猜测是 css 方面的问题。但我还是想不到哪里的错误导致了 semantic-ui 在 jsfiddle 的 iframe 里面和正常的页面完全不同的渲染方式。

请问我怎么修改才能保证代码的正确工作？

方便您观察的代码：

<html>
    <head>
        <title>KommentJS Administration Page</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>
    </head>
    <body>
      <div class="ui minimal comments">
        <h3 class="ui dividing header">Comments</h3>
        <div class="comment">
          <a class="avatar">
            <img src="https://semantic-ui.com/images/avatar/small/jenny.jpg">
          </a>
          <div class="content">
            <a class="author">Matt</a>
            <div class="metadata">
              <span class="date">Today at 5:42PM</span>
            </div>
            <div class="text">
              How artistic!
            </div>
            <div class="actions">
              <a class="reply">Reply</a>
            </div>
          </div>
        </div>
        <form class="ui reply form">
          <div class="field">
            <textarea></textarea>
          </div>
          <div class="ui blue labeled submit icon button">
            <i class="icon edit"></i> Add Reply
          </div>
        </form>
      </div>
    </body>
</html>

div

class

form

1 条回复

cnnblike

2018-03-25 12:38:45 +08:00

经过把 iframe 里面的代码和本地的代码逐字节比较，答案是缺少了<!DOCTYPE HTML>，没什么经验，根本不知道为啥这个就会影响渲染出的结果