css不是按照我想要的方式跨多个浏览器

时间：2013-01-29 22:25:59

标签： css

（我在jsfiddle网站上有这个here。）

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

enter image description here

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

当我在Chrome或Firefox中查看时，会发生这种情况：

enter image description here

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

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

@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>

2 个答案:

答案 0 :(得分：0)

看起来右边的html片段包含在一个额外的div中，左边的html片段不是。例如，比较如何定义交货地址和余额。余额包含在额外的Div中。

所以，从我坐的地方看，非IE浏览器正在尝试显示IE忽略的额外div。你能在＃34; right-div＆＃34;中定义块吗？部分与左边相同？对我来说，看起来更像是关于如何定义右侧组的内容与左侧组的不同。

答案 1 :(得分：0)

如果您更改.rightDiv会使其有效，而不是将其浮动，会发生什么？

.rightDiv {
      position:relative;
      float:left;
      width:49%;
      margin-left:2%;
      text-align:left;
      display:inline;
 }
相关问题
最新问题