0

我已经使用 asp.net 创建了一个网站，当我在 Firefox 和 IE 上渲染该网站时，该网站看起来相同，而在 Chrome 上渲染它时，它会将按钮向下移动并更改它的位置

谷歌浏览器渲染 在此处输入图像描述

这是我的母版页代码

<%@ 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;
    }
4

3 回答 3

2

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

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

请参阅Chrome 中的 HTML input type="file" 不显示先前答案的文本框。

于 2012-10-29T16:58:11.500 回答
1

我会告诉你查找“css/html 浏览器修复”。不同的浏览器以不同的方式显示网页。Internet Explorer 通常是视觉差异最大的浏览器。

于 2012-10-29T17:02:46.440 回答
1

当然，页面在不同的浏览器上看起来会有所不同。

你有body {font-size: .80em;}和em是一个相对大小，这意味着网页上的字体大小是浏览器默认字体大小的 80%。

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

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

请注意，如果您在正文中以这种方式设置了尺寸，则可以em在其他地方使用，这将与此正文尺寸相关。所以像这样的事情h3 {font-size:1.2em}是完全可以的。

于 2012-10-30T10:11:47.500 回答