Question

我使用<hr> html标记创建了垂直和水平线，并将它们放在PHP脚本中。我遇到的问题是当你放大网站时，线条的位置会移动。

如果你缩放（大多数浏览器上的命令键+/-），我所做的边框（带有div）会保留在原位，但水平和垂直线不会。

另一件我想提的是，由于oscommerce 2.2配置，我无法更改CSS脚本（stylesheet.css）..这是oscommerce服务器的一个非常旧的版本，我知道它可能是一个更好的选择升级服务器并查看模板，但我想在这里找出我的问题。

所以我们不要谈论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>

Answer 1

好吧我遇到问题是你使用position:absolute及其在浏览器中的行为并且解决方案是将position:relative提供给其父div并重新安排您的hr位置根据您的工作我在浏览器中尝试这里是您的人力资源代码我修改它根据我你根据我修改它给你，不要忘记给出相对于其父div的位置

<hr style="width: 0.3px; height: 480px; background: none repeat scroll 0% 0% rgb(51, 51, 51); position: absolute; top: 0px; left: 215px;">
<hr style="height: 480px; background: none repeat scroll 0% 0% rgb(51, 51, 51); position: absolute; width: 0.3px; right: 227px; top: 0px;">
<hr style="width: 610px; height: 0.3px; background: none repeat scroll 0% 0% rgb(51, 51, 51); position: absolute; top: 170px; left: 34px;">
<hr style="width: 610px; height: 0.3px; background: none repeat scroll 0% 0% rgb(51, 51, 51); position: absolute; left: 34px; top: 347px;">

Answer 2

我建议将 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/

Answer 3

这种情况正在发生，因为你的风格中有绝对的位置......尝试将所有div锁定为一个div并将hr与边距对齐而不是“left”和“right”

Answer 4

您的<hr/>具有绝对位置，因此确定当其他元素移动时，它在同一个地方停留的位置。
{strong}

无法

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

最好使用小png图片而不是<hr/> <hr/> <hr/> <hr/> <table width="100%" cellspacing="0" cellpadding="2"> <tr> <td> <div> </div> ..... </td>，并将其设为hr的背景，或最后一例<td>

<hr /> html标记的小问题

4 个答案: