自动css样式取决于文本行

Question

我遇到了针对不同浏览器的CSS样式问题。我认为这只与歌剧有关（仅用歌剧发现这个问题，用opera，firefox和chrome测试）。 所以我有一个页面，其中是无序列表，每个列表项目符号都是不同的图像（但大小相同）。我在每个li元素中对齐图像和文本，文本位于中心（水平按图像）。每个li都有一行或两行的文本。当有两行文字的li时，我不需要使用顶部填充，只需底部填充。当有一行文本li时，我使用顶部和底部填充，以正确对齐文本。

歌剧看起来很好，但是当我开启chrome和firefox时，一些li文本在2行中，歌剧中的同一个li文本在一行中。 opera的问题在于它根据视图的缩放程度改变文本间距。 chrome和firefox都不会改变文本间距，无论页面缩放多少都无关紧要。

为了更清楚，这里是一个示例，它取决于它的缩放程度，它看起来如何：

我的css样式用于unorded列表：

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

所以问题是有没有办法，根据文本行的数量来改变css样式（并在放大和缩小时动态地改变它）。或者也许有一些更简单的方法？

Answer 1

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