0

html タグを使用して縦線と横線を作成し<hr>、PHP スクリプト内に配置しました。私が抱えている問題は、サイトをズームすると、線の位置が移動することです。

ズームすると (ほとんどのブラウザーでコマンド キー +/-)、作成した境界線 (div を使用) はその場所に留まりますが、水平線と垂直線は変わりません。

私が言及したいもう1つのことは、oscommerce 2.2構成のためにCSSスクリプト（stylesheet.css）を変更できなかったことです..これはoscommerceサーバーの非常に古いバージョンであり、おそらくそれがより良いオプションになることを知っています.サーバーをアップグレードしてテンプレートを調べますが、ここで問題を解決したいと思います。

この場合、私は CSS を使用する資格がないので、CSS については話さないようにしましょう。

コードのスニペットを次に示します。

&nbsp;&nbsp;&nbsp;&nbsp;
  <div style="width:680px;height:540px;border-radius: 20px;-webkit-border-radius: 20px;-moz-border-radius: 20px;-o-border-radius: 20px;border:1px solid #a4a4a4;background-color:#FFFFFF;">

      <hr style="width: 0.3px; height: 480px; background: #333; position: absolute; left: 660px; top: 315px;">
      <hr style="width: 0.3px; height: 480px; background: #333; position: absolute; left: 890px; top: 315px;">

      <hr style="width: 610px; height: 0.3px; background: #333; position: absolute; left: 468px; top: 463px;">
      <hr style="width: 610px; height: 0.3px; background: #333; position: absolute; left: 468px; top: 643px;">

     <table width="100%" cellspacing="0" cellpadding="15">
  </div>
4

4 に答える 4

1

に追加position:relativeして %parent DIVに変更することをお勧めしますHR width & height

例：

<div style="width:680px;height:540px;border-radius: 20px;-webkit-border-radius: 20px;-moz-border-radius: 20px;-o-border-radius: 20px;border:1px solid #a4a4a4;background-color:#FFFFFF;position: relative">
    <hr style="width: 0.3px; height: 100%; background: #333; position: absolute; left: 33%; top: -9px;">
    <hr style="width: 0.3px; height: 100%; background: #333; position: absolute; left: 66%; top: -9px;">
    <hr style="width: 100%; height: 0.3px; background: #333; position: absolute; left: 0; top: 33%;">
    <hr style="width: 100%; height: 0.3px; background: #333; position: absolute; left: 0; top: 66%;">
    <table width="100%" cellspacing="0" cellpadding="15"></table>
</div>

ライブ: http://jsfiddle.net/ybBwT/

于 2013-05-03T10:17:52.590 に答える
0

  • あなた<hr/>には絶対的な位置があるので、他の要素が移動している間、同じ場所に留まっていても問題ありません。

  • タグの後は開けません。<hr/><table>

これは間違っています：

<table width="100%" cellspacing="0" cellpadding="2">

<hr style="width: 0.3px; height: 480px; background: #333; position: absolute; left: 660px; top: 315px;">
<hr style="width: 0.3px; height: 480px; background: #333; position: absolute; left: 890px; top: 315px;">

<hr style="width: 610px; height: 0.3px; background: #333; position: absolute; left: 468px; top: 463px;">
<hr style="width: 610px; height: 0.3px; background: #333; position: absolute; left: 468px; top: 630px;">

      </div>

たとえば、次のようにする必要があります。

<hr/>
<hr/>

<hr/>
<hr/>
<table width="100%" cellspacing="0" cellpadding="2">
    <tr>
        <td>
           <div>
           </div>
            .....
        </td>
  • の代わりに小さな png 画像を使用hrして背景にすることをお勧めします<td>。<table>
于 2013-05-03T10:16:09.880 に答える