个人中心
gpt4 book ai didi

css - mozilla 和 chrome 的页面布局不一样

转载 作者：太空宇宙 更新时间：2023-11-03 20:58:23 25 4
gpt4 key购买 nike

我的登录页面有一些设计问题。我做到了，有些元素在不同的浏览器中是不一样的(如下图)。我是设计新手，所以我把代码放在下面，因为我在这里犯了一些愚蠢的错误。

enter image description here 

<!DOCTYPE html>
<html>
<head>
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <meta charset="utf-8" />
    <title>JS Bin</title>
    <!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
    <style>
        body
        {
            background: #3C5975;
            width: 950px;
            margin: 0 auto;
        }

        article, aside, figure, footer, header, hgroup, menu, nav, section
        {
            display: block;
        }

        p
        {
            color: #ffffff;
            margin: 0;
            padding: 0;
            padding-bottom: 5px;
        }

        #registrationForm
        {
            width: 160px;
            margin-top: 10px;
            margin-left: 10px;
            text-align: right;
        }

        #leftMainContent
        {
            width: 50%;
            float: left;
            height: 100%;
        }

        #rightMainContent
        {
            width: 50%;
            float: right;
            height: 100%;
        }

        #footerLinks li a
        {
            color: #ffffff;
            text-decoration: none;
            font-size: 12px;
        }

        #loginBox a
        {
            color: #ffffff;
            text-decoration: none;
        }

        #btnSignUp
        {
            height: 21px;
            color: #ffffff;
            text-decoration: none;
            font-weight: bold;
            text-align: center;
            background: #fd8402;
            border-style: none;
            text-shadow: 1px 1px 1px #000000;
            -moz-border-radius: 2px;
            -webkit-border-radius: 2px;
            border-radius: 2px;
        }

        #btnLogin
        {
            height: 21px;
            color: #ffffff;
            text-decoration: none;
            font-weight: bold;
            text-align: center;
            background: #fd8402;
            border-style: none;
            text-shadow: 1px 1px 1px #000000;
            -moz-border-radius: 2px;
            -webkit-border-radius: 2px;
            border-radius: 2px;
        }
    </style>
</head>
<body>
    <header style="background: #2d4a66; width: 950px; height: 50px; display: table;">
        <div style="width: 50%; float: left; display: table-cell; margin-top: 15px;">
            <h1 style="margin: 0; padding: 0; color: #ffffff;">
                myCityNook</h1>
        </div>
        <div id="loginBox" style="float: right; margin-top: 10px; text-align: right;">
            @using (Html.BeginForm())
            {   
                <div>
                    @Html.TextBoxFor(x => x.Username, new { PlaceHolder = "My Username" })
                    @Html.TextBoxFor(x => x.Password, new { PlaceHolder = "My Password" })
                    <input id="btnLogin" type="submit" value="Log in" />
                </div>
                <div>
                    <label id="remember" style="float: left;">
                        <input type="checkbox" />
                        <span style="color: #ffffff;">Remember me</span>
                    </label>
                    <p style="margin: 0; padding: 0; float: left; margin-left: 40px;">
                        <a href="#">Forgot it?</a></p>
                </div>
            }
        </div>
    </header>
    <div id="wrapper" style="height: 400px; width: 950px; ">
        <div id="leftMainContent">
            <h3 style="margin: 0; padding: 0; padding-left: 15px; padding-top: 20px; color: #ffffff;">
                ???</h3>
            <p style="padding: 15px 15px 15px 15px;">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                unknown printer took a galley of type and scrambled it to make a type specimen book.
                It has survived not only five centuries, but also the leap into electronic typesetting,
                remaining essentially unchanged. It was popularised in the 1960s with the release
                of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
                publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        <div id="rightMainContent">
            <div style="margin-left: 90px;">
                <div id="registrationForm" style="">
                    <h4 style="margin: 0; padding: 0; padding-top: 20px; padding-bottom: 10px; color: #ffffff;">
                        Make your profile now</h4>
                    @using (Html.BeginForm())
                    {
                        <p>
                            <select style="width: 93%">
                                <option value="1">???</option>
                                <option value="1">???</option>
                                <option value="1">???</option>
                                <option value="1">???</option>
                            </select></p>
                        <p>
                            <select style="width: 93%">
                                <option value="1">???</option>
                                <option value="1">???</option>
                                <option value="1">???</option>
                                <option value="1">???</option>
                            </select></p>

                        <p>@Html.TextBox("FirstName", "", new { PlaceHolder = "My First Name" })</p>
                        <p>@Html.TextBox("LastName", "", new { PlaceHolder = "My Last Name" })</p>
                        <p>@Html.TextBox("Email", "", new { PlaceHolder = "My Email" })</p>
                        <p>@Html.TextBox("Password", "", new { PlaceHolder = "My Password" })</p>    
                        <p>
                            <input id="btnSignUp" type="submit" value="Sign up" /></p>
                    }
                </div>
            </div>
        </div>
    </div>
    <footer style="background: #2d4a66; color: #ffffff; overflow: hidden; vertical-align: middle;">
        <p style="float: left; font-size: 12px;">
            © 2011 mycitynook.com</p>
        <ul id="footerLinks" style="margin: 0; padding: 0; list-style: none; float: right;">
            <li style="display: inline;"><a href="#">About</a></li>
            <li style="display: inline;"><a href="#">User Agreement</a></li>
            <li style="display: inline;"><a href="#">Privacy Policy</a></li>
            <li style="display: inline;"><a href="#">Careers</a></li>
            <li style="display: inline;"><a href="#">Send Feedback</a></li>
        </ul>
    </footer>
</body>
</html>

最佳答案

关于css - mozilla 和 chrome 的页面布局不一样，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7213111/

25 4 0
文章推荐： python - 比较文件中的两部电影
文章推荐： c# - 避免为具有非限定泛型类型的泛型静态类使用类名
文章推荐： c# - 如何测试 apiController
文章推荐： jquery - 基于动态内容创建css样式
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com