0

(ここで見ることができる 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>
4

2 に答える 2

0

.rightDiv を変更して、右にフロートするのではなく、マージンで機能するようにするとどうなりますか?

.rightDiv {
      position:relative;
      float:left;
      width:49%;
      margin-left:2%;
      text-align:left;
      display:inline;
 }
于 2013-01-29T23:53:40.560 に答える
0

右側の html フラグメントは追加の div 内に含まれているように見えますが、左側の html フラグメントはそうではありません。たとえば、配送先住所と残高がどのように定義されているかを比較します。バランスは余分な Div でラップされます。

したがって、私が座っている場所から、IE 以外のブラウザーは、IE が無視している余分な div を表示しようとしています。「right-div」セクションのブロックを左と同じように定義できますか? 私には、右側のグループのコンテンツが左側の div グループとは異なる方法で定義されていることがより重要であるように見えます。

于 2013-01-29T22:33:56.383 に答える