代码之家  ›  专栏  ›  技术社区  ›  Dorjan

浏览器之间的输入和定位问题

css
  •  0
  • Dorjan  · 技术社区  · 15 年前

    我对CSS、FF3/IE7和Opera 10有问题。

    我有一个输入[type=“submit”]和一个锚点,我希望它们的样式相同。无论我尝试什么,唯一合乎逻辑的浏览器似乎是Opera10(它用相同的CSS将它们样式相同)。

    FF似乎有不同的填充物(我需要将提交框缩小1倍以适应填充物,但这会使Opera 10相形见绌),而IE7就差得远了。

    代码爱好者:

    <form action="/login" method="post" id="loginform">
        <fieldset>
            <input type="submit" value="Login" />
            <a href="/register">Register</a>
            <a href="/reminder">Lost Password?</a>
    </fieldset>
    </form>
    

    CSS:

    fieldset a {
        color: #ffcc00;
        border: 1px solid #707070;
        background: #000000;
        font-size: 10px;
        font-weight: normal;
        padding: 2px;
        /*vertical-align: text-top;*/
    }
    fieldset a:hover {
        color: #ffcc00;
        border: 1px solid #707070;
        background: #333333;
        cursor: pointer;
        font-size: 10px;
        font-weight: normal;
        text-decoration: none;
        padding: 2px;
    }
    fieldset input[type="submit"] {
        color: #ffcc00;
        padding: 2px;
        border: 1px solid #707070;
        background: #000000;
        font-size: 10px;
        font-weight: normal;    
    }
    fieldset input[type="submit"]:hover {
        color: #ffcc00;
        padding: 2px;
        border: 1px solid #707070;
        background: #333333;
        cursor: pointer;
        font-size: 10px;
        font-weight: normal;
    }
    

    任何解决浏览器之间对齐问题的帮助都是需要的,因为我需要支持这三个功能(Safari也是如此,但我认为如果我将这三个功能对齐,它也应该在那里工作)。

    提前多谢(P.S.我现在要去吃午饭了,我会在很抱歉之前回答太慢之后马上检查答案)

    2 回复  |  直到 15 年前
        1
  •  1
  •   n1313    15 年前

    火狐的问题就是这样解决的

    button::-moz-focus-inner { 
      border: 0;
      padding: 0;
    }
    
        2
  •  0
  •   David Andres    15 年前

    单独试试这个。我建议使用reset.css文件强制所有浏览器将苹果视为苹果,然后相应地设置输入和元素的样式。

    有可能其他的CSS规则也会加入到混合中。

    http://meyerweb.com/eric/tools/css/reset/ 用于重置文件。

    我以前对IE和某些元素的样式(特别是禁用的元素)有过一些问题,以及IE在版本6和7之间处理这种样式时有何不同。

    在这些情况下,以下doctype似乎有帮助,但在IE 6中呈现可能不再如预期那样工作:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">