Question

当我在JSFiddle中使用此代码时，它工作正常，但在safari中它无法正常工作。不确定问题是什么，因为它看起来非常基本。问题是中间的聊天框右侧过了太多。

<body>
    <div class="chat">
        <input type="text" class="chat-name" placeholder="Enter your name">
        <div class="chat-messages">
            <div class="chat-message">
                Alex: Hello there
            </div>
            <div class="chat-message">
                Billy: Hello!
            </div>

        </div>
        <textarea placeholder="Type your message"></textarea>
        <div class="chat-status">Status: <span>Idle</span></div>
    </div>
</body>

CSS：

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

.chat {
    max-width: 300px;
}

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

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

chat-message {
    margin-bottom: 10px;
}

.chat-name{
    width: 100%;
    padding: 10px;
    border-bottom: 0;
    margin: 0;
}

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

.chat-status{
    color: #bbb;
}

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

Answer 1

我的笔记本电脑上没有Safari，但我怀疑这是box-sizing问题。

这应该可以解决问题：

.chat-messages {
    width: 100%;
    height: 300px;
    overflow-y: scroll;
    padding: 10px; 
    box-sizing: border-box;  
}

用css设置div的宽度有问题

1 个答案: