Question

我使用asp.net创建了一个网站，当我在firefox和IE上渲染网站时，网站看起来一样，当在Chrome上渲染时，它会将按钮移动到更低位置并改变它的位置

Google chrome render enter image description here

这是我的主页代码

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="UMSite.master.cs" Inherits="WebApplication4.UMSiteMaster" %>

<!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" xml:lang="en">
<head runat="server">
    <title></title>
    <link  href="~/Styles/UM.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="Form1" runat="server">
    <div class="page">
        <div class="header">
            <div class="title">
                 <h1><img alt="" src="Styles/UMHeader.png" width= "950" height= "65" /></h1>

            <div class="clear hideSkiplink">
                <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                    <Items>
                        <asp:MenuItem NavigateUrl="~/Home.aspx" Text="Home"/>

                    </Items>

                </asp:Menu>
            </div>
            </div>

        </div></h1>

        <div class="main" runat="server">

            <asp:ContentPlaceHolder ID="MainContent" runat="server"/>


        </div>

        </form>

</body>
</html>

以下是css

  /* DEFAULTS
    ----------------------------------------------------------*/

    body   
    {
        background: #b6b7bc;
        font-size: .80em;
        font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
        margin: 0px;
        padding: 0px;
        color: #696969;
        height: 192px;
    }

    a:link, a:visited
    {
        color: #034af3;
    }

    a:hover
    {
        color: #1d60ff;
        text-decoration: none;
    }

    a:active
    {
        color: #034af3;
    }

    p
    {
        margin-bottom: 10px;
        line-height: 1.6em;
    }


    /* HEADINGS   
    ----------------------------------------------------------*/

    h1, h2, h3, h4, h5, h6
    {
        font-size: 1.5em;
        color: #666666;
        font-variant: small-caps;
        text-transform: none;
        font-weight: 200;
        margin-bottom: 0px;
    }

    h1
    {
        font-size: 1.6em;
        padding-bottom: 0px;
        margin-bottom: 0px;
    }

    h2
    {
        font-size: 1.5em;
        font-weight: 600;
    }

    h3
    {
        font-size: 1.2em;
    }

    h4
    {
        font-size: 1.1em;
    }

    h5, h6
    {
        font-size: 1em;
    }

    /* this rule styles <h1> and <h2> tags that are the 
    first child of the left and right table columns */
    .rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
    {
        margin-top: 0px;
    }


    /* PRIMARY LAYOUT ELEMENTS   
    ----------------------------------------------------------*/

    .page
    {
        width: 950px;
        height:auto;
        background-color: #fff;
        margin: 10px auto 5px auto;
        border: 1px solid #496077;

    }

    .header
    {
        position:relative;
        margin: 0px;
        padding: 0px;
        background: #E30613;
        width: 100%;
        top: 0px;
        left: 0px;
        height: 90px;
    }

    .header h1
    {
        font-weight: 700;
        margin: 0px;
        padding: 0px 0px 0px 0px;
        color: #E30613;
        border: none;
        line-height: 2em;
        font-size: 2em;
    }

    .main
    {
        padding: 0px 12px;
        margin: 0px 0px 0px 0px;
        min-height: 630px;
        width:auto;
        background-image:url('UMBackground.png');
      }

    .leftCol
    {
        padding: 6px 0px;
        margin: 0px 0px 0px 0px;
        width: 200px;
        min-height: 200px;
        width:auto;
    }

    .footer
    {
        color: #4e5766;
        padding: 0px 0px 0px 0px;
        margin: 0px auto;
        text-align: center;
        line-height: normal;
    }


    /* TAB MENU   
    ----------------------------------------------------------*/

    div.hideSkiplink
    {
        background-color:#E30613;
        width: 950px;
        height: 35px;
        margin-top: 0px;

    }

    div.menu
    {
        padding: 1px 0px 1px 2px;
    }

    div.menu ul
    {
        list-style: none;
        margin: 0px;
        padding: 5px;
        width: auto;
    }

    div.menu ul li a, div.menu ul li a:visited
    {
        background-color: #E30613;
        border: 1.25px #00BFFF solid;
        color: #F5FFFA;
        display:inline;
        line-height: 1.35em;
        padding: 10px 30px;
        text-decoration: none;
        white-space: nowrap;

    }

    div.menu ul li a:hover
    {
        background-color: #000000;
        color: #F5FFFA;
        text-decoration: none;
    }

    div.menu ul li a:active
    {
        background-color: #E30613;
        color: #cfdbe6;
        text-decoration: none;
    }

    /* FORM ELEMENTS   
    ----------------------------------------------------------*/

    fieldset
    {
        margin: 1em 0px;
        padding: 1em;
        border: 1px solid #ccc;
    }

    fieldset p 
    {
        margin: 2px 12px 10px 10px;
    }

    fieldset.login label, fieldset.register label, fieldset.changePassword label
    {
        display: block;
    }

    fieldset label.inline 
    {
        display: inline;
    }

    legend 
    {
        font-size: 1.1em;
        font-weight: 600;
        padding: 2px 4px 8px 4px;
    }

    input.textEntry 
    {
        width: 320px;
        border: 1px solid #ccc;
    }

    input.passwordEntry 
    {
        width: 320px;
        border: 1px solid #ccc;
    }

    div.accountInfo
    {
        width: 42%;
    }

    /* MISC  
    ----------------------------------------------------------*/

    .clear
    {
        clear: both;
    }

    .title
    {
        display: block;
        float: left;
        text-align: left;
        width: 947px;
        height: 132px;
    }

    .loginDisplay
    {
        font-size: 1.1em;
        display: block;
        text-align: right;
        padding: 10px;
        color: White;
    }

    .loginDisplay a:link
    {
        color: white;
    }

    .loginDisplay a:visited
    {
        color: white;
    }

    .loginDisplay a:hover
    {
        color: white;
    }

    .failureNotification
    {
        font-size: 1.2em;
        color: Red;
    }

    .bold
    {
        font-weight: bold;
    }

    .submitButton
    {
        text-align: right;
        padding-right: 10px;
    }

Answer 1

这就是webkit浏览器（safari和chrome等）呈现html文件输入类型的方式。

有关文件输入标记的示例，请参阅this jsbin。

有关上一个答案，请参阅HTML input type="file" in Chrome does not show textbox。

Answer 2

我告诉你要查找“css / html浏览器修复程序”。不同的浏览器显示不同的网页。 Internet Explorer通常是具有最大视觉差异的浏览器。

Answer 3

当然，不同浏览器的页面会有所不同。

您有body {font-size: .80em;}且em是相对大小，这意味着网页上的字体大小是浏览器默认字体大小的80％。< / p>

由于浏览器的默认大小可能不同（它始终是用户可选的），这意味着如果您的目标是浏览器互操作性，则无法使用此方法。与行高相同。

保持用户的偏好（并接受不同的用户会看到不同的东西），或选择以像素或点为单位的字体大小。

请注意，如果您在身体中以这种方式设置了大小，则可以在其他位置使用em，然后将相对于此正文大小。所以像h3 {font-size:1.2em}这样的东西就完全可以。

在不同浏览器上渲染页面时布局更改

3 个答案: