0

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

Opera 看起来不错，但是当我打开 chrome 和 firefox 时，一些 li 文本在 2 行中，而 li 文本在 1 行中。Opera 的问题在于，它会根据放大多少视图来更改文本间距。chrome 和 firefox 都不会改变文本间距，无论缩放多少页面。

为了更清楚起见，以下是它在歌剧中的外观示例，具体取决于缩放的程度： 歌剧观

我用于无序列表的 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样式（并在放大和缩小时动态改变它）。或者也许有一些更好更简单的方法？

4

1 回答 1

0

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

于 2012-08-09T15:14:42.783 回答