css - css 没有按照我希望的方式在多个浏览器中运行

Question

（我在一个 jsfiddle 站点中有这个，可以在这里看到。）

以下是 Internet Explorer 中发生的情况：

在此处输入图像描述

这就是我希望它看起来的样子，具有讽刺意味的是，IE 正在做我想做的事。

当我在 Chrome 或 Firefox 中查看此内容时，会发生以下情况：

在此处输入图像描述

正如你所看到的，它没有从中心分裂。

这是我的剃须刀页面的样子：

@using System.Collections
@using SuburbanCustPortal.SuburbanService
@model SuburbanCustPortal.SuburbanService.CustomerData      

@{
    ViewBag.Title = "Account Screen";
 }

<h2>AccountScreen</h2>

<div class="leftdiv">
  <fieldset>
    <legend>Customer Info</legend>
    @Html.Partial("CustomerInfo", Model)
  </fieldset>

  <fieldset>
    <legend>Delivery Address</legend>
    @Html.Partial("DeliveryAddress", Model)
  </fieldset>

  <fieldset>
    <legend>Delivery Info</legend>
    @Html.Partial("DeliveryInfo", Model)
  </fieldset>
</div>

<div class="rightdiv">
  <fieldset> 
    <legend>Balance</legend>
      @Html.Partial("AccountBalance", Model)
  </fieldset>

  <fieldset>
    <legend>Account Options</legend>
    <br/>

     @using (Html.BeginForm("AccountScreenButton", "Customer", FormMethod.Post))
    {
      <div class="sidebysidebuttons">
        <div class="box">
          <button name="options" value="payment">Make a Payment</button>
          &nbsp;
          <button name="options" value="activity">Display Activity</button>
        </div>
      </div>      
    }

  </fieldset>

  <fieldset> 
      <legend>Billing Info</legend>
        @Html.Partial("BillingInfo", Model)
    </fieldset>
</div>

这是在我正在调用的css文件中：

.leftdiv {
    float: left;
    width: 49%;
  text-align: left;
  display: inline;
}
.rightdiv {
    float: right;
    width: 49%;
  text-align: left;
    display: inline;
}
.sidebysidebuttons {
 float: left;
 display: block;
  margin-left: 60px;  
text-align:center   
}

任何人都知道我怎样才能让它们看起来一样，或者两者都像 IE 如何显示它们或看到我做错了什么？

===== 根据要求 =====

这是页面加载后的页面源：

<!DOCTYPE html>

<html>
<head>
  <title>Your Company Name Here : Account Screen</title>
  <link href="/Content/reset.css" rel="stylesheet" type="text/css" />
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="/Content/web.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/Views/main.js" type="text/javascript"></script>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />

    <script>
        $(function () {
            $('.focus :input').focus();
        });
    </script>

</head>
    <body>

        <div class="page">

            <div id="header">
                <div id="headerimg"></div>  
                <div id="logindisplay">
                        Welcome <strong>webtest</strong>!
    [ <a href="/Account/LogOff">Log Off</a> ]

                </div>
                <div id="menucontainer">
                    <ul id="menu">

               <li><a href="http://www.xxxxxx.com">Home</a></li>

                          <li><a href="/Customer/AccountScreen">Account</a></li>
                          <li><a href="/Payment/PrePayment">Make Payment</a></li>
                          <li><a href="/GasOrder/OrderGas">Order Gas</a></li>
                          <li><a href="/Home/ContactUs">Contact Us</a></li>
                          <li><a href="/Account/UpdateAccount">Update Login</a></li>

                          <li><a href="/Home/NewsList">* Sales *</a></li>

                    </ul>
                </div>

                <div id="main">


<h2>AccountScreen</h2>

<div class="leftdiv">
  <fieldset>
    <legend>Customer Info</legend>

<div  class="leftdiv">
  <br/>
  <label class="sizedCustomerlabel">Account Number:</label>            
  <label class="sizedCustomerlabel">Name:</label>
  <label class="sizedCustomerlabel">Mailing Address:</label>
  <label class="sizedCustomerlabel">City:</label>
  <label class="sizedCustomerlabel">St/Zip:</label>
  <label class="sizedCustomerlabel">Phone Number:</label>
</div>

<div class="rightdiv">
  <br/>
  <label class="sizedCustomerDataLeftLabel">01 - 02228&nbsp;</label>
  <label class="sizedCustomerDataLeftLabel">PICKERING VALLEY CONTRAC&nbsp;</label>
  <label class="sizedCustomerDataLeftLabel">960 POTTSTOWN PIKE&nbsp;</label>
  <label class="sizedCustomerDataLeftLabel">CHESTER SPRINGS&nbsp;</label>
  <label class="sizedCustomerDataLeftLabel">PA&nbsp;&nbsp;19425&nbsp;</label>
  <label class="sizedCustomerDataLeftLabel">610&nbsp;458-7200</label>
</div>

  </fieldset>

  <fieldset>
    <legend>Delivery Address</legend>

<div  class="leftdiv">
  <br/>
  <label class="sizedCustomerlabel">Care of:</label>
  <label class="sizedCustomerlabel">Delivery Street:</label>            
  <label class="sizedCustomerlabel">Delivery City:</label>  
</div>

<div class="rightdiv">
  <br/>
  <label class="sizedCustomerDataLeftLabel">&nbsp;</label>
  <label class="sizedCustomerDataLeftLabel">&nbsp;</label>
  <label class="sizedCustomerDataLeftLabel">&nbsp;</label>  
</div>

  </fieldset>

  <fieldset>
    <legend>Delivery Info</legend>

<div  class="leftdiv">
  <br/>
  <label class="sizedCustomerlabel">Last Delivery Date:</label>
  <label class="sizedCustomerlabel">Number of Tanks:</label>            
  <label class="sizedCustomerlabel">Tank Serial#:</label>  
  <label class="sizedCustomerlabel">Tank Size:</label> 
  <label class="sizedCustomerlabel">Tank Type:</label> 
  <label class="sizedCustomerlabel">Qty Last Delivered:</label> 
  <label class="sizedCustomerlabel">Year To Date Deliveries:</label> 
  <label class="sizedCustomerlabel">Year To Date Gas:</label> 
  <label class="sizedCustomerlabel">Total Used Last Year:</label> 
</div>

<div class="rightdiv">
  <br/>
  <label class="sizedCustomerDataLeftLabel">10/16/2012&nbsp;</label>
  <label class="sizedCustomerDataLeftLabel">1&nbsp;</label>
  <label class="sizedCustomerDataLeftLabel">&nbsp;</label>
  <label class="sizedCustomerDataLeftLabel">30&nbsp;</label>

      <label class="sizedCustomerDataLeftLabel"> &nbsp;</label>

  <label class="sizedCustomerDataLeftLabel">15&nbsp;</label>  
  <label class="sizedCustomerDataLeftLabel">4&nbsp;</label>  
  <label class="sizedCustomerDataLeftLabel">70.4&nbsp;</label>  
  <label class="sizedCustomerDataLeftLabel">117.0&nbsp;</label>  
</div>


  </fieldset>
</div>

<div class="rightdiv">
  <fieldset> 
    <legend>Balance</legend>
    <div>

<div class="leftdiv">
  <br/>
  <label class="sizedCustomerlabel">Over 30:</label>
  <label class="sizedCustomerlabel">Over 60:</label>
  <label class="sizedCustomerlabel">Over 90:</label>
  <label class="sizedCustomerlabel">Over 120:</label>
  <label class="sizedCustomerlabel">Current:</label>
  <label class="sizedCustomerlabel">Total:</label>
</div>

<div class="rightdiv">
  <br/>
  <label class="sizedCustomerDataRightlabel">$7.15&nbsp;</label>
  <label class="sizedCustomerDataRightlabel">$90.48&nbsp;</label>
  <label class="sizedCustomerDataRightlabel">$5.50&nbsp;</label>
  <label class="sizedCustomerDataRightlabel">$37.31&nbsp;</label>
  <label class="sizedCustomerDataRightlabel">$7.34&nbsp;</label>
  <label class="sizedCustomerDataRightLabelRed">$147.78&nbsp;</label>
</div>

    </div>    
  </fieldset>

  <fieldset>
    <legend>Account Options</legend>
    <br/>

<form action="/Customer/AccountScreenButton" method="post">      <div class="sidebysidebuttons">
        <div class="box">
          <button name="options" value="payment">Make a Payment</button>
          &nbsp;
          <button name="options" value="activity">Display Activity</button>
        </div>
      </div>      
</form>
  </fieldset>

    <fieldset> 
      <legend>Billing Info</legend>
      <div>

<div class="leftdiv">
  <br/>
  <label class="sizedCustomerlabel">Budget Bal:</label>
  <label class="sizedCustomerlabel">Budget Rate:</label>
  <label class="sizedCustomerlabel">Non-Budget Bal:</label>
  <label class="sizedCustomerlabel">LastPayment Date:</label>
  <label class="sizedCustomerlabel">Last Payment Amount:</label>
  <label class="sizedCustomerlabel">Security Deposit:</label>
  <label class="sizedCustomerlabel">Prev Statment Bal:</label>
</div>

<div class="rightdiv">
  <br/>
  <label class="sizedCustomerDataRightlabel">$0.00&nbsp;</label>
  <label class="sizedCustomerDataRightlabel">$0.00&nbsp;</label>
  <label class="sizedCustomerDataRightlabel">$0.00&nbsp;</label>
  <label class="sizedCustomerDataRightlabel">06/27/2012&nbsp;</label>
  <label class="sizedCustomerDataRightlabel">$59.25&nbsp;</label>
  <label class="sizedCustomerDataRightlabel">$0.00&nbsp;</label>
  <label class="sizedCustomerDataRightlabel">$147.78&nbsp;</label>
</div>

      </div>    
    </fieldset>




</div>

                    <div style="clear: both;"></div>
                </div>
                <div id="footer">
                </div>
            </div>
        </div>
    </body>
</html>

score 0 · Accepted Answer

看起来右侧的 html 片段包含在一个额外的 div 中，而左侧的 html 片段则没有。例如，比较交货地址和余额的定义方式。余额包含在一个额外的 Div 中。

因此，从我坐的位置来看，非 IE 浏览器正试图显示 IE 忽略的额外 div。您能否将“right-div”部分中的块定义为与左侧相同？对我来说，看起来更多的是关于右侧组的内容与左侧 div 组的定义方式不同。

score 0 · Accepted Answer

如果您更改 .rightDiv 以使其与边距一起工作而不是向右浮动会发生什么？

.rightDiv {
      position:relative;
      float:left;
      width:49%;
      margin-left:2%;
      text-align:left;
      display:inline;
 }

css - css 没有按照我希望的方式在多个浏览器中运行

2 回答 2

Related

Reference