我一直在尝试制作带有人字形列表项的 HTML/CSS 导航栏。我已经在此处提供了我的代码:https://github.com/twslankard/css-chevron-bar/blob/master/index.html
由于我的问题相当具体，我将代码作为公共(public)领域提供，以防你们中的一位 CSS 向导能帮助我。 :)
现在是我的问题。我一直在尝试设计栏以使其适当缩放，例如当有人修改 ul.chevronbar li 的字体大小属性或当用户在浏览器中点击 Control+ 或 Control- 时。
我尝试使用两种不同的 CSS 重置，Eric Meyers Reset CSS 2.0 和 YUI 3。但是，在 Firefox 中缩放/缩放“大部分”有效，而在 Chrome 中它不起作用(尤其是在放大时)。如果可能的话，我想要一些关于如何让它在 Chrome 中更好地工作的建议。
这是一张说明问题的图片。非常感谢您的帮助。
编辑:这就是我最终得到的结果。请原谅凌乱的 CSS。我稍后会抽空清理它。
https://github.com/twslankard/css-chevron-bar-2
编辑 2:另一个人在这里慷慨地提供了他们对这个问题的解决方案:http://jsfiddle.net/pXBTK/3/
最佳答案
实际上，诀窍是如何使尖部分的高度与它后面的菜单项的高度相匹配，从而避免锯齿状的外观。
我猜是这样的事情导致了问题:
- 计算出的菜单项高度为 5 个物理屏幕像素
- 产生箭头的每个顶部和底部边框必须是 5 的 50%
- 因为你不能显示半个像素，所以都四舍五入，比如 3 个像素
- 加在一起，箭头变成 6 个像素高，但菜单项只有 5 个
看来很明显，解决方法就是按照说明简单地 overflow hidden 。对原始文件真正必要的唯一更改是:
ul.chevronbar {
...
overflow: hidden; /* Add this line */
}
它还需要调整大小以更接近原始外观，但没有它也能工作。实际上不需要固定高度。
这个简化的示例通过突出显示部分箭头说明了箭头的概念:
<head><style type="text/css">
ul {
background-color: lightgray;
font-size: xx-large;
overflow: hidden;
position: relative;
}
li {
display: inline-block;
background-color: gray;
margin-right: 1.5em;
}
li:after {
content: '';
border: 0.85em solid blue;
border-left-color: red;
border-right-color: red;
height: 0;
position: absolute;
top: -0.2em;
}
</style></head>
<body><ul>
<li>Lorem Ipsum</li> <li>Foobar</li>
</ul></body>
关于html - "chevron"CSS 和浏览器缩放问题中的样式导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11801266/