html - 输入字段的宽度不同。如何解决这个 CSS 挑战？

Question

问。如何获得与其他输入字段相同大小的名称输入字段？如您所见，宽度并不完全相同。我什么都试过了，在这个阶段我一无所知。

在 Firefox 和 Opera 上看起来不错。 然而，它在 Chrome 和 Chrome Canary 上看起来并不好。我正在使用最新版本的 Chrome。

当我取出 padding-right: 0px; 时，它看起来不错。但是我没有在我的 css 中的任何地方编写这段代码，我无法更改或删除它。如果我在 input#name{} 上写 padding-right: 0; 什么也不会发生。

参见网站:http://demo.chilipress.com/epic3/

演示:http://jsfiddle.net/isherwood/9gvXK/

HTML:

<div id="content">
    <div class="contact">
        <form>
            <fieldset class="name">
                <label for="name" class="name group">Name</label>
                <input id="name" name="name" required pattern="[A-Za-z-0-9]+\s[A-Za-z]+" title="firstname lastname" />
            </fieldset>
            <fieldset class="email">
                <label for="email" class="email group">Email</label>
                <input type="email" id="email" name="email" required title="Submit a valid 
                Email">
            </fieldset>
            <fieldset class="phone">
                <label for="phone" class="phone group">Telephone</label>
                <input type="tel" id="phone" name="phone" pattern="(\+?\d[- .]*){7,17}" required title="Submit an international, national or local phone number" />
            </fieldset>
            <fieldset class="message">
                <label class="message group">Message</label>
                <input type="text" id="message" required/>
            </fieldset>
            <fieldset class="send">
                <input type="submit" value="Send" class="sendButton">
            </fieldset>
        </form>
    </div>
</div>

CSS:

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    width: 100%;
}
label {
    color: #d8d9de;
    font-family:'apple_chancerychancery';
    font-size: 1.6vw;
    float: left;
}
input {
    padding: 5px;
    text-align: left;
    border-radius: 10px;
    background: none repeat scroll 0 0 rgba(255, 240, 260, 0.5);
}
#name, #email, #phone, #message {
    color: #253c93;
    text-decoration: none;
    border: 1px dotted #29FF00;
    font-family:'Calibri', Arial, sans-serif;
    font-size: 1em;
    width: 75%;
    float: right;
    margin: 0;
}
textarea {
    vertical-align: top;
}
div#inner-editor {
    padding: 30px;
}
#message {
    padding-top: 10%;
}
.sendButton {
    background: rgba(0, 0, 0, 0);
    color: #d8d9de;
    font-size: 1.6vw;
    font-family:'apple_chancerychancery';
    padding: 1.5% 5%;
    width: 22%;
    min-width: 61px;
    text-align: center;
    border: none;
    margin: 0 40%;
    cursor: pointer;
    box-shadow: inset 2px 2px 9px rgba(199, 255, 100, 0.73), inset -2px -2px 9px rgba(199, 255, 100, 0.73);
}

正如您所注意到的，名称输入字段与其他输入字段不同
输入字段。

Answer 1

尝试在私有(private)导航中运行您的网站(⌘+Shift+N)

您的扩展有时可能会修改您的页面...我有一次在我的 javascript 控制台上出现了一个错误。

如果可行，请尝试一个一个地删除您的扩展，看看哪个与 css 交互...