V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
cnnblike
V2EX  ›  问与答

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

  •  1
     
  •   cnnblike · 2018-03-25 11:52:00 +08:00 · 1627 次点击
    这是一个创建于 2465 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我在使用 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>
    
    cnnblike
        1
    cnnblike  
    OP
       2018-03-25 12:38:45 +08:00
    经过把 iframe 里面的代码和本地的代码逐字节比较,答案是缺少了<!DOCTYPE HTML>,没什么经验,根本不知道为啥这个就会影响渲染出的结果
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1185 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 18:15 · PVG 02:15 · LAX 10:15 · JFK 13:15
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.