我想我有 CSS/JavaScript 问题？

Question

我有两个问题...我尝试更改我的 CSS 文件、JavaScript 文件和其他各种东西。 谷歌搜索无法解决这些问题，所以我来到了很棒的答案网站！

此页面 -> http://students.cmps.subr.edu/aaron.chauvin/misc/test2.html在 Chrome 和 Z50DE9BC68C93DC32D8C6C7C90593471 中存在一些问题。 只有当我的 CSS 生效时，应该并排的图片才没有，但是当 CSS 关闭时，它们是。 这个问题在 FF/IE9 中并不明显。 我认为这与  但我不完全确定。 Edit Edit: Thanks for the fix Genzer!

同样在那个页面上，即使我所有的 CSS/JavaScript 都没有链接，我在链接的图像底部和虚线链接边框之间也有一个小差距......我想摆脱这个差距。 造成这种差距的原因是什么？ 这发生在所有浏览器中。

提前致谢。

编辑：这是 CSS： http://students.cmps.subr.edu/aaron.chauvin/misc/style.css

编辑编辑：修复并排图像链接问题，现在试图找出导致自定义 a:focus 边框显示变化的原因（IE9 中不存在，Webkit 浏览器中部分包含图像链接）和它与图像链接底部之间的间隙（所有浏览器，但 IE9）。

Answer 1

问题是您将所有列的信息包装在一个跨度中： <span class="reg">...</span>

IE9 和 FF 确定您希望它显示为块元素，但 Webkit（Chrome 和 Safari）不这样做。 在“reg” class 上设置display:block ，您应该进行设置。 （我认为这也解决了“虚线边框”问题，但我不太确定你的意思）

To get the orange border to show up in IE9, make sure to set outline-style to something like "solid" or "double" in the a.piclink:hover css class, in style.css. 一旦我这样做了，边界就会出现。

我仍然不完全确定为什么您的链接和嵌套图像的行为如此，但我发现了一些调整（调整 = 几乎是 hack）以使其工作：设置display:inline-block; 在a.piclink上并在其上设置固定高度。 请注意，inline-block 大头钉在 4px 上，因此高度应该比图像的高度高 4px； 在你的情况下：47px。 这有点像黑客，但它是有效的并且有效。 不幸的是 IE7 不喜欢这个，但是zoom:1; *display:inline; zoom:1; *display:inline; 让它工作。

Answer 2

在您的样式中添加以下 CSS 代码将使 Chrome 显示您的 TestPage 与 IE8 相同。

span.reg a {
    display: inline;
}