2009-09-18 39 views
0

这是一个有点开放式的问题,但我真的很想理解这一个,所以我不在乎。两元素“表”很好地对齐

我有一个两元素“表”(CSS与跨度)。左栏总是有一个20x20像素的图标。第二列有与该图标关联的单行文本。

我已经通过各种想法了,我可以拿出来让这个看起来正是在IE6-8,火狐3.5和谷歌Chrome相同,但所有的想法导致文本具有一个或两个像素关闭至多

我正在寻找一个防呆非<table>的方式,使这个名单看起来完全在所有浏览器相同。我的意思是每个像素。

回答

2

像素完美并不存在 - 你根本就没有那种在浏览器那里的控制范围,并且也不是为你盈利试图让它如此。收益递减,你的名字是IE6。

Fwiw,这听起来很可能是你在这里做得更好,只是列表(<ul>)列表式样设置为无,并使用背景图像来显示您的20x20图标。

0

是...

渲染的图像;)

(对不起,但如果你想真的 “pixle完美”,那么这很可能是最简单的方法)

+2

不投票下来,请不要发表任何评论。或者在所有列出的浏览器上提供工作解决方案,以满足给定的 – 2009-09-18 20:19:16

2

你是追逐一个移动的目标。有这么多的布鲁斯和这么多的版本,最有可能永远不会成为一种完美的方式。然后,即使你确实接近完美,任何浏览器的下一个版本都可能会再次崩溃。

2

我的问题是:如果这真是一个表,为什么不使用<table>?避免为普通页面布局使用表是一回事,但表格标记对于显示表格仍然是完全合法的。

如果不为你工作,考虑<ul>修改或相似。尽管如此,你不可能在所有浏览器中真正实现像素完美。

+0

我提供的+1的要求,但我不相信这是一个表格 - 如果是,那么应该接受 – annakata 2009-09-18 20:37:32

0

我同意Tonyannakata。然而,通常最好的结果来自于简单的东西是这样的:

<span><img src="images/icon.gif" style="vertical-align:text-bottom;" />Some text</span> 

至少WebKit中,IE8和Firefox长得一模一样。 (我相信IE7过,但我没有测试)

0

我索里对这个庞大的编辑我没有正确读取的问题。正如一些人已经表示,很难在网站上实现像素完美,因为每个浏览器都以不同的方式渲染页面。 使用CSS你可以使用absolut和基本上任何相对定位,但在跨浏览器兼容性方面它远非完美。