html - 取决于文本行的自动 css 样式

Question

我对不同浏览器的 CSS 样式有疑问。我认为它只与歌剧有关(仅在歌剧中发现了这个问题，用歌剧、火狐和 Chrome 进行了测试)。所以我有一个页面，其中有无序列表，每个列表元素符号都是不同的图像(但大小相同)。我在每个 li 元素中对齐图像和文本，该文本位于中心(按图像水平排列)。每里有一行或两行文字。当 li 有两行文本时，我不需要使用顶部填充，只需使用底部填充。当只有一行文本 li 时，我使用顶部和底部填充来正确对齐文本。

Opera 似乎没问题，但是当我打开 chrome 和 firefox 时，一些 li 文本是 2 行，而 opera 上的相同 li 文本是一行。 Opera 的问题在于，它会根据 View 的缩放程度来更改文本间距。无论页面缩放多少，chrome 和 firefox 都不会改变文本间距。

为了更清楚地说明，这里有一些示例，它在 Opera 上的外观取决于缩放的程度:

我的用于无序列表的 css 样式:

li.top{
padding-top:9px;
}
li.bottom0{
padding-bottom:6px;
}
li.bottom {
    padding-bottom: 13px;
}
    li.bottom2{
padding-bottom:15px;
}

.li-meetings {
    list-style-type: none;
    background:url(wp-content/uploads/2012/07/calendar.gif) no-repeat;
    padding-left: 50px;
} //all li element styles are the same, just differs uploaded image

所以问题是有没有什么办法可以根据 li 有多少文本行来更改 css 样式(并在放大和缩小时动态更改它)。或者也许有更好更简单的方法？

Answer 1

您不应依赖文本框尺寸。尝试使用像这样的通用解决方案:http://jsfiddle.net/jhmVf/3/