Question

我正在按照本教程创建聊天服务器： https://www.youtube.com/watch?v=ixDhEZJBmmA

无论出于何种原因，程序中的textarea和输入区域都不符合300px的正确宽度。我检查了类似的线程，并在最近两个小时内忽略了这个视频，寻找拼写错误。那么为什么我的两个组件不符合300px？我下载了一个镀铬标尺应用程序，他们的测量值大约为280px而不是300px。我是css的菜鸟，所以请指出我讨厌的任何不良代码行为！

以下是代码：

<!DOCTYPE hmtl>

<html>
<head>
    <title>Chat</title>
    <link rel="stylesheet"  href="css/style.css">
</head>
<body class = "body">
    <div class="chat">
        <input type ="text" class = "chat-name" placeholder= "Enter Your Name"> 

        <div class = "chat-messages">

        </div>


        <textarea  placeholder= "Type Your Message"></textarea>
        <div class = "chat-status"> Status: <span>Idle</span></div>
    </div>

</body>
</html>

    body, textarea, input 
{
    font: 14px "Trebuchet MS", sans-serif;

}

.chat{
    max-width: 300px;
}

.chat-messages, .chat-name, .chat textarea {
    border: 1px solid #bbb;
}

.chat-messages {

    width: 100%;
    height: 300px;
    overflow-y: scroll; 
    padding: 10px;
}
.chat-name {

    width: 100%;
    padding: 10px;
    border-bottom: 0;
    margin: 0;
}

.chat textarea {
    width: 100%;
    padding: 10px;
    border-top: 0;
    margin: 0;
    max-width:  100%;
}

.chat-status {
    color: #bbb;
}

.chat textarea, .chat-name{
    outline: none;

}

编辑：这是jfiddle：http://jsfiddle.net/rezen__/b2KRx/ 这里还有一张照片： wrongDivSize

编辑＃2：所以它适用于jfiddle，适用于其他一些用户计算机，但不适用于我的。我有这个确切的代码副本并粘贴在我的编辑器中。

Answer 1

删除。{1}}。Chat_message类

div宽度不正确

1 个答案: