2017-11-18 24 views
-2

エッジブラウザとクロムでレンダリングが異なる1つのhtmlファイルがあります。 htmlファイル内の異なるラベルの高さと幅を変更して、あるブラウザのUserInterfaceを修正していますが、これはChromeのUIを破壊しています。両方のブラウザでUIを適切に調整することができません。どうすれば解決できますか?助けてください。異なるブラウザでレンダリングが異なる

<!DOCTYPE html> 
    <html> 
<head> 
<title>ZZZZ Tab</title> 
<link rel="stylesheet" type="text/css" 
    href="/code/ski/current_1/UI/web/css/aa.css" /> 
<link rel="stylesheet" type="text/css" 
    href="/code/ski/current_1/stylesheets/bb.css" /> 

<script src="/UI/js/app.js"></script> 
<script src="/UI/js/cash/ZZZZ.js"></script> 
<script src="/sha/js/ui/get.js"></script> 

<style type="text/css"> 
.Total_Label { 
    font-family: Arial; 
    font-size: 12px; 
    font-weight: bold; 
    color: #003366; 
} 
</style> 
</head> 
<body class="Center" onload="page_Load();"> 

    <div style="position: absolute; top: 8; left: 550;"> 
     <input type="button" id="DD" class="si_Button" style="width: 60px;" 
      tabIndex="1" onClick="onClickDDDD()" value="D" /> 
    </div> 
    <div style="position: absolute; top: 38; left: 445;"> 
     <input type="button" id="BalButton" class="si_Button" 
      style="width: 60px;" tabIndex="3" onClick="VltBalance()" 
      value="Get Bal" /> 
    </div> 
    <div style="position: absolute; top: 38; left: 550;"> 
     <input type="button" id="DDDD" class="si_Button" style="width: 60px;" 
      tabIndex="4" onClick="ClickVlt()" value="DD" /> 
    </div> 

    <div id="zzzz" align="left" style="z-index: 1"> 
     <table border="0" cellpadding='5' cellspacing='5' 
      style="height: 350px; width: 90%"> 
      <tr> 
       <td width="15%" class="General" nowrap="nowrap"><span 
        id="tell_ddraw"></span></td> 
       <td width="20%" align="right"><span id="tel_Bal"></span></td> 
       <td width="5%">&nbsp;</td> 
       <td width="30%"></td> 
      </tr> 
      <tr> 
       <td width="15%"><select id="vD" name="val" tabindex="2" 
        onchange="getvB(this);"> 
       </select></td> 
       <td width="20%" align="right"><span id="vB"></span></td> 
       <td width="5%">&nbsp;</td> 
       <td width="30%"></td> 
      </tr> 
      <tr> 
       <td colspan="3" valign="top"> 
        <table> 
         <tr> 
          <td class="Label"><input type="radio" name="BuyOrSell" 
           id="BuyVal" checked="checked" tabindex="5" /> <label 
           for="BuyVal">Buy from Val</label></td> 
          <td class="Label"><input type="radio" name="BuyOrSell" 
           id="sellToVal" tabindex="6" /> <label for="sellToVal">Sell 
            to Val</label></td> 
         </tr> 
        </table> 
       </td> 
       <td valign="top"> 
        <table width="45%" cellspacing="3"> 
         <tr> 
          <td colspan="3" class="headerTitle" align="center">Bill 
           Count</td> 
         </tr> 
         <tr> 
          <td class="Label">&nbsp;Count</td> 
          <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td> 
          <td class="Label">Value</td> 
         </tr> 
         <tr> 
          <td><input id="bill_100" type="text" tabindex="7" size="4" 
           maxlength="7" value="0" class="format" format="+ve_number" 
           onblur="Bill(this)" style="text-align: right;" /></td> 
          <td class="Label">x 100</td> 
          <td><input id="bill_100_amt" type="text" tabindex="8" 
           size="9" maxlength="12" value="$0.00" class="format" 
           format="+ve_currency" disabled="true" style="text-align: right;" /> 
          </td> 
         </tr> 
         <tr> 
          <td><input id="bill_50" type="text" tabindex="9" size="4" 
           maxlength="7" value="0" class="format" format="+ve_number" 
           onblur="Bill(this)" style="text-align: right;" /></td> 
          <td class="Label">x 50</td> 
          <td><input id="bill_50_amt" type="text" tabindex="10" 
           size="9" maxlength="12" value="$0.00" class="format" 
           format="+ve_currency" disabled="true" style="text-align: right;" /> 
          </td> 
         </tr> 
         <tr> 
          <td><input id="bill_20" type="text" tabindex="11" size="4" 
           maxlength="7" value="0" class="format" format="+ve_number" 
           onblur="Bill(this)" style="text-align: right;" /></td> 
          <td class="Label">x 20</td> 
          <td><input id="bill_amt" type="text" tabindex="12" size="9" 
           maxlength="12" value="$0.00" class="format" 
           format="+ve_currency" disabled="true" style="text-align: right;" /> 
          </td> 
         </tr> 
         <tr> 
          <td><input id="bill_10" type="text" tabindex="13" size="4" 
           maxlength="7" value="0" class="format" format="+ve_number" 
           onblur="Bill(this)" style="text-align: right;" /></td> 
          <td class="Label">x 10</td> 
          <td><input id="bill_10_amt" type="text" tabindex="14" 
           size="9" maxlength="12" value="$0.00" class="format" 
           format="+ve_currency" disabled="true" style="text-align: right;" /> 
          </td> 
         </tr> 
         <tr> 
          <td><input id="bill_5" type="text" tabindex="15" size="4" 
           maxlength="7" value="0" class="format" format="+ve_number" 
           onblur="Bill(this)" style="text-align: right;" /></td> 
          <td class="Label">x 5</td> 
          <td><input id="bill_5_amt" type="text" tabindex="16" 
           size="9" maxlength="12" value="$0.00" class="format" 
           format="+ve_currency" disabled="true" style="text-align: right;" /> 
          </td> 
         </tr> 
         <tr> 
          <td><input id="bill_1" type="text" tabindex="17" size="4" 
           maxlength="7" value="0" class="format" format="+ve_number" 
           onblur="Bill(this)" style="text-align: right;" /></td> 
          <td class="Label">x 1</td> 
          <td><input id="bill_1_amt" type="text" tabindex="18" 
           size="9" maxlength="12" value="$0.00" class="format" 
           format="+ve_currency" disabled="true" style="text-align: right;" /> 
          </td> 
         </tr> 
        </table> 
       </td> 
      </tr> 
      <tr> 
       <td colspan="2" style="height: 6px"></td> 
      </tr> 
     </table> 
    </div> 

    <div class="Total" style="position: absolute; top: 280px; left: 570px;"> 
     Total</div> 
    <div style="position: absolute; top: 280px; left: 620px;"> 
     <input id="total_bills" type="text" tabindex="19" size="12" 
      maxlength="12" value="" onchange="onChange(this);" 
      onblur="TotalAmount(this);" style="text-align: right;" /> 
    </div> 
    <div 
     style="position: absolute; top: 310px; left: 602px; height: 30px; width: 80px"> 
     <input type="button" id="cancelButton" class="si_Button" 
      style="width: 60px;" tabIndex="20" onClick="Cancel()" value="Cancel" /> 
    </div> 
    <div 
     style="position: absolute; top: 310px; left: 670px; height: 30px; width: 80px"> 
     <input type="button" id="submitButton" class="si_Button" 
      style="width: 60px;" tabIndex="21" onClick="Submit()" value="Submit" /> 
    </div> 
</body> 
</html> 
+1

をリセットしない限り、それはレイアウトをオフに投げることができます*ファイル(簡単にウェブ上で発見)へ各ブラウザが同じデフォルトを使用していることを確認してください。ユーザーはブラウザの環境設定でデフォルトのいくつかをパーソナライズすることができます。独自のスタイルルールでリセットしない限り、レイアウトを無効にすることがあります – charlietfl

+0

影響を受けた部分のみを表示します。 4-10行、最適な分散のスクリーンショットが必要です。 – Gibolt

答えて

0

各ブラウザが同じデフォルトを使用していることを確認するために(簡単にウェブ上で発見)「CSSを正規化」ファイルを使用してください。

ユーザーがブラウザの環境設定でデフォルト値の一部をパーソナライズすることができますし、「CSSを正常化」*を使用して独自のスタイルルールで

関連する問題