Question

首次尝试登录表单中的圆角。刚刚做了布局，但有一些IE7的麻烦。试图避免使用条件语句，但是虽然我可以在Firefox 3.5中完美地显示它，IE看起来在我的登录按钮的右侧和左侧创建了更大的边距。可能是因为我没有以最好的方式构建这个，所以寻找社区的一点见解。我尝试使用所示方法转弯到角落后开始了我的大多数问题。我的目标是IE6 / 7兼容性。

<div id="credentials">
    <div id="credsheader"><div id="tr"> </div></div>
    <input type="text" class="blurred" id="username" value="USERNAME" /> 
    <input type="password" id="password" class="blurred" value="PASSWORD" />
    <button type="submit" id="login"><img src="./images/login.png" alt="Submit" /></button>
    <div id="credsfooter"><div id="bl"> </div></div>
</div>

div#credentials{
    position: absolute;
    right: 10px;
    top: 10px;
    background-color: #666;
    padding: 0px 5px;
}

div#tr{
    float: right;
    background: url('../images/tr.png');
    background-repeat: no-repeat;
    cursor: default;
}

div#bl{
    float: left;
    background: url('../images/bl.png');
    background-repeat: no-repeat;
    cursor: default;
}

#credsfooter{
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 6px;
}

#credsheader{
    position: absolute;
    top: 0px;
    right: 0px;
    height: 6px;
}

#username{
    font-family: 'Lucida Sans', Helvetica, Arial, sans-serif;
    font-size: 8pt;
    padding: 3px;
    margin: 8px 3px;
    vertical-align: middle;
}

#password{
    font-size: 8pt;
    padding: 3px 3px 4px 3px;
    margin: 8px 17px 8px 3px;
    vertical-align: middle;
}

input.blurred{
    color: #AAA;
}

input.focused{
    color: #000;
}

#login{
    background: transparent;
    border: 0px;
    padding: 4px 0px 2px 0px;
    margin: 0px -12px;
    cursor: pointer;
    vertical-align: middle;
}

Answer 1

在IE7中的<button>元素上，您需要设置溢出可见：

button {
 *overflow: visible;
}

在此处找到：http://refresh-sf.com/blog/2009/06/button-padding-ie7-bu/

我个人喜欢使用“* hack”来定位IE7 - 尽管在这种情况下可能不需要。

Answer 2

好的，所以我发现很多问题都是由浏览器的不一致造成的，这些问题导致了很多问题，所以我基本上已经开始了。我因为不一致而讨厌表格所以这对我来说是一次学习经历。我能够真正巩固CSS，因为很多它用于补偿奇怪的填充和边距。最重要的是我使用按钮的输入元素而不是按钮，因为它在浏览器中更加一致。我还添加了一个表单标签来修复那里的任何问题。请注意，表单中的<p>是有意的。我还添加了一个reset.css文件，它有很大的不同，因为它将所有元素重置为与所有浏览器一致的状态。

以下是重写代码：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Buttons Suck in IE7!</title>
        <link rel="stylesheet" href="reset.css" type="text/css" />
        <style type="text/css">
            #credentials{
                position: absolute;
                right: 10px;
                top: 10px;
                background-color: #666666;
                padding: 10px;
                -moz-border-radius: 5px;
            }

            input.text-input{
                font-family: 'Lucida Sans', Helvetica, Arial, sans-serif;
                border: 1px solid black;
                vertical-align: middle;
                height: 20px;
                width: 140px;
                color: #AAAAAA;
            }

            input.text-input:focus{
                color: #000000;
            }

            input#login{
                background: transparent;
                border: 0px;
                height: 20px;
                cursor: pointer;
                vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <div id="credentials">
            <form action="http://www.site.com/login.php">
                <p>
                    <input type="text" class="blurred text-input" id="username" value="USERNAME" />
                    <input type="password" class="blurred text-input" id="password"  value="PASSWORD" />
                    <input id="login" type="image"
                           src="http://www.axialis.com/objects/users-home.jpg"
                           name="submit" value="Button Text" />
                </p>
            </form>
        </div>
    </body>
</html>

请注意，我用于按钮的图片是我在Google上找到的一些随机图片！您可能还注意到我使用-moz-border-radius: 5px;作为圆角。这是为了简化。您可以做的是在Firefox中拍摄凭据框的屏幕截图，然后在您喜欢的图像编辑器中裁剪出框。接下来，您将使用某种油漆刷工具填充灰色的输入。现在你将有一个相同形状和大小的空白灰色框。现在，您只需将其设置为凭据框的背景图像。这样做更简单，然后一次做每个角落！执行此操作后，请不要忘记删除-moz-border-radius: 5px;。

哦，在我忘记之前是reset.css：

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
        margin:0;
        padding:0;
}
table {
        border-collapse:collapse;
        border-spacing:0;
}
fieldset,img { 
        border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
        font-style:normal;
        font-weight:normal;
}
ol,ul {
        list-style:none;
}
caption,th {
        text-align:left;
}
h1,h2,h3,h4,h5,h6 {
        font-size:100%;
        font-weight:normal;
}
q:before,q:after {
        content:'';
}
abbr,acronym { border:0;
}

在救生员信任我的每一页上都包含此reset.css。哦，还有最后一点。 input.text-input:focus{}可能无法在IE6或7中运行，它只适用于标签。但不要担心，因为我认为IE6此时的寿命有限。

我希望那有帮助......祝你好运！

更新：我在IE 5.5-8上进行了测试，每个看起来都一样，唯一的问题是：焦点仅适用于IE8输入标签。

Answer 3

不确定是否是这种情况，但可能是'IE Double Margin Bug'。

从记忆中，我认为可能值得尝试将display: inline;添加到您的浮动元素中吗？

祝你好运！

Answer 4

如果不查看HTML（例如图片），就很难回答这个问题。你能在某个地方设置样本页吗？

从理论上讲，可能是你的按钮元素没有hasLayout的情况。您可以将position: relative CSS样式添加到按钮元素，看看它是否有效。或者，它可能是负水平边距的情况（IE有时不喜欢它们）。

Answer 5

获得可接受的利润率，但仍然不是完美的跨浏览器。只花了一些时间来操纵边距大小，直到看起来不太糟糕。

IE中按钮元素的保证金太多，在Firefox中看起来很完美

5 个答案: