6

我有以下虚拟代码：

<!doctype html>
<html>
  <head>
    <style>
      p {font-size: 20px;}
    </style>
  </head>
  <body>
    <script type="text/javascript">
      window.onload = function () {
        var body = document.getElementsByTagName('body')[0],
            p = document.createElement('p'),
            el;

          p.style.height = '20px';
          p.innerText = 'Some Test';

        for (var i = 0, len=30; i<len; i++) {
          el = p.cloneNode(true);
          body.appendChild(el);
        }
      };
    </script>
  </body>
</html>

它渲染了一些

元素和页面预览看起来如下所示：在此处输入图像描述

我需要为第一个和最后一个元素添加边框，如下所示：在此处输入图像描述

是否可以使用 CSS 制作并在 webkit 中工作？

编辑：给所有建议以下CSS的人

p:nth-child(1){
 border-top : solid 1px gray;
}
p:last-child{
   border-top : solid 1px gray;
}

或者

p:first-child {border-top : solid 1px gray;}
p:last-child {border-bottom : solid 1px gray;}

这对我不起作用，因为它适用于所有页面并且看起来像这样：在此处输入图像描述

我需要在 chrome 中工作

4

4 回答 4

0

更复杂的解决方案是计算每个用户的可视页面高度（JavaScript、jQuery 等），并检查有多少项目适合一个页面。之后，您可以设置所需元素的样式（nth-child(x)）。不是最好的解决方案，但如果您有具体要求（作为某个浏览器、操作系统等）可能会起作用

编辑：

一个可能的解决方案可能是：http: //jsfiddle.net/VKDVd/

HTML：只有几个占位符 div...注意你已经设置了你的文档类型（否则 $(window).height() 将无法正常工作！）

JavaScript/jQuery：

$(document).ready(function () {

    // when including images in your side you should use $(window).load(function() {[...]} to make sure they are completely loaded before the script calculates the heights

    var pageHeight = $(window).height(); // JS-only and IE-compatible solution see my answer
    var sumElementHeights = 0;
    var count = -3; // ensures that the black border is inside the viewport

    for (var i = 0; i < $('div').length && sumElementHeights < pageHeight; i++, count++) {
        sumElementHeights += $('div').eq(count).height(); // sums up the div heights
    }

    $('div').eq(0).css('border-top', '10px solid black');
    $('div').eq(count).css('border-bottom', '10px solid black');
    // you could add a loop here for each page individually...       
});

PS：如果视口大小发生变化（例如，如果用户调整浏览器窗口的大小），您还可以添加更多代码来更新 div 边框。

PPS：您也可以使用数字进行计数- 因为它当然取决于您添加到元素的边框。

于 2013-07-08T13:30:03.423 回答
0

如果您不关心旧浏览器。那么这将为你工作......

@media print
  {
      p:nth-child(1){
          border-top : solid 1px gray;
      }
      p:last-child{
          border-bottom : solid 1px gray;
      }
  }

但是如果你想让它在旧浏览器（尤其是 IE）上工作，你就必须使用一些 JS 技术。

于 2013-07-08T12:09:59.550 回答
0

您可以使用两个容器，将一个放在页面顶部，另一个放在底部。这些容器必须放入其中position:fixed，它们将打印在每一页中。这将适用于 Firefox、Opera 和 Internet Explorer，但不适用于 webkit 浏览器。

演示在这里

经过几次测试，我认为您的 CSS 的最佳值如下：

#top {
  height: 2px;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  border-bottom: 1px solid #000;
}
#bottom {
  height: 2px;
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 1px;
  border-top: 1px solid #000;
}
p {
  padding-top: 20px;
}

和你的 HTML：

<div id="top"></div>
<div id="bottom"></div>
<p>abc</p>
<p>abc</p>
.....
于 2013-07-08T13:19:37.367 回答
-1

尝试first-child和last-child。

例如，

p {font-size: 20px;}
p:first-child {...} /* Add your desired style here */
p:last-child {...} /* Add your desired style here */
于 2013-07-08T12:06:18.330 回答