这是一个创建于 2802 天前的主题，其中的信息可能已经有所发展或是发生改变。
我在使用 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>  | 1 cnnblike OP 经过把 iframe 里面的代码和本地的代码逐字节比较，答案是缺少了<!DOCTYPE HTML>，没什么经验，根本不知道为啥这个就会影响渲染出的结果 |
Select Language