不使用border画出1px高的线，在不同浏览器的标准和怪异模式下都能保持效果一样

要创建一条 1px 高的线，并且不使用 border，还要保证在不同浏览器和模式下显示一致，最可靠的方法是使用伪元素（pseudo-element）配合 height 或 background。

以下提供两种方法，并解释其原理：

方法一：使用 ::before 或 ::after 伪元素和 height

.line {
  height: 1px; /* 设置线的高度 */
  background-color: #000; /* 设置线的颜色 */
  display: block; /* 确保占据整行 */
}

这个方法最简单直接，通过设置元素的高度和背景颜色来模拟一条线。display: block; 确保该元素占据整行宽度。

方法二：使用 ::before 或 ::after 伪元素和 background

.line {
  height: 0; /* 将元素高度设置为0 */
  overflow: hidden; /* 隐藏溢出内容 */
}

.line::before {
  content: "";
  display: block;
  height: 1px;
  background-color: #000; /* 设置线的颜色 */
}

这个方法利用伪元素 ::before 创建线，并将主元素的高度设置为 0，通过 overflow: hidden 隐藏伪元素以外的内容。这样可以避免主元素本身占据空间。

两种方法的比较:

方法一更加简洁，代码量更少。
方法二更加灵活，可以更容易地实现一些复杂的效果，例如渐变线或虚线。可以通过 background-image 属性实现。

一些额外的建议:

重置默认样式: 为了确保跨浏览器兼容性，最好先重置一些默认样式，例如 margin 和 padding。
选择器: 根据实际情况选择合适的 CSS 选择器，例如 .line 可以替换成更具体的类名。
颜色和样式: 根据需要调整线的颜色和样式，例如使用 background-image 创建渐变或虚线效果。

示例 (方法二，更具通用性):

<!DOCTYPE html>
<html>
<head>
<title>1px Line</title>
<style>
.line {
  height: 0;
  overflow: hidden;
  margin: 20px 0; /* 上下添加一些间距，方便观察 */
}

.line::before {
  content: "";
  display: block;
  height: 1px;
  background-color: #000;
}
</style>
</head>
<body>

<p>上方是一条1px的线</p>
<div class="line"></div>
<p>下方是一条1px的线</p>
<div class="line"></div>

</body>
</html>