【发布时间】：2012-08-09 11:36:12
【问题描述】：
我对不同浏览器的 css 样式有疑问。我认为它只与歌剧有关（发现这个问题只与歌剧有关，用歌剧、火狐和铬测试过）。 所以我有一个页面，其中是无序列表，每个列表项目符号都是不同的图像（但大小相同）。我在每个 li 元素中对齐了图像和文本，该文本位于中心（按图像水平）。每个 li 都有一行或两行的文本。当有两行文本的 li 时，我不需要使用顶部填充，只需使用底部填充。当有一行文本 li 时，我同时使用顶部和底部填充，以正确对齐文本。
opera 看起来不错，但是当我打开 chrome 和 firefox 时，一些 li 文本在 2 行中，而在 Opera 上相同的 li 文本在 1 行中。 Opera 的问题在于，它会根据放大多少视图来更改文本间距。 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 样式（并在放大和缩小时动态更改它）。或者也许有更好更简单的方法？
【问题讨论】：
-
在“查看”->“缩放”下选择“仅缩放文本”，在Firefox中可以达到与在Opera中相同的效果；你真的不应该有取决于显示文本需要多少行的类；在较小的屏幕尺寸上会发生什么？我猜文本会换成多行——你的 CSS 能处理这些情况吗？
-
好的，那么我该如何处理该文本，以便在主流浏览器上正确显示？我的意思是，如果我更改填充以使其在一个浏览器上看起来不错，那么在另一个 li 元素之间会太靠近或太远