0

我用 html 标签创建了垂直和水平线<hr>，并将它们放在 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>
4

4 回答 4

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;">
于 2013-05-03T10:10:34.050 回答
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

发生这种情况是因为您的样式中有绝对位置...尝试将所有 div 阻塞到一个 div 中并将 hr 与边距而不是“左”和“右”对齐

于 2013-05-03T10:11:54.727 回答
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 回答