这是我的网站:http://portable-ebook-reader.net
顶部的搜索栏由两个背景图像组成。一个用于输入搜索短语的位置,另一个是实际的搜索按钮。
我的问题是在Chrome中,搜索按钮图像高了2像素。但在IE和FF中看起来完美。如果我修改CSS(margin-top: 2px),那么Chrome看起来很好,但IE和FF会出现问题。
有任何想法吗?我已经搜寻了几小时,但没有任何进展。
谢谢!
这是我的网站:http://portable-ebook-reader.net
顶部的搜索栏由两个背景图像组成。一个用于输入搜索短语的位置,另一个是实际的搜索按钮。
我的问题是在Chrome中,搜索按钮图像高了2像素。但在IE和FF中看起来完美。如果我修改CSS(margin-top: 2px),那么Chrome看起来很好,但IE和FF会出现问题。
有任何想法吗?我已经搜寻了几小时,但没有任何进展。
谢谢!
使用只应用于Webkit浏览器(Chrome和Safari)的CSS:
@media screen and (-webkit-min-device-pixel-ratio:0) {
#searchsubmit { height: 20px; }
#s { margin-top: 5px; }
}
这是一个丑陋的hack,但它可以解决那些令人沮丧的渲染问题。
navigator.appVersion
是否包含单词“Chrome”,并通过JavaScript将该按钮的相对定位向下调整几个像素。if (navigator.appVersion.indexOf("Chrome/") != -1) {
// modify button
}
*
来调整IE,例如:*margin-top: 2px;
可以专门为IE7和IE6调整顶部边距。#s
和#searchsubmit
规则集#searchsubmit
中删除font: 14px "century gothic", Arial, Helvetica, sans-serif;
#s
规则集的第一个和第二个填充值设置为0
(即将8px 更改为 0px ),然后在#s
和#searchsubmit
中添加margin-top:
声明,并为两个元素设置相同的值,例如margin-top:8px;
。
- 如果您还遇到问题,请尝试将此行复制到
#searchsubmit
规则集中: font: normal 100% "Tahoma", Arial, Helvetica, sans-serif;
。
由于可能导致问题的不同可能性很多,如果无法确定问题源,您可以尝试上述其中一种 hack。
尝试将文档类型更改为严格模式 - 在一个浏览器中有效的大部分内容应该在所有三个主要浏览器中都能够起作用。但并不是完全一致。
我几周前发现了这个技巧,它在所有浏览器中的效果都相同。
创建一个包含搜索栏和搜索按钮的单个图形。通过CSS样式将其设置为表单的背景。然后通过类或ID调整文本输入和提交按钮(可能需要{border:0; background:transparent}),然后简单地调整表单元素的高度和宽度以适应表单背景的布局。我以前使用<input type="image" ... />,但无论如何我都无法正确对齐它,无论我如何进行样式或填充。如果需要,此方法在第一次调整表单元素的边距、填充和绝对定位后就可以正常工作(您可能希望在测试期间保留边框可见,以便您可以正确放置它)。
我还发现在我的搜索提交按钮上放置{cursor:pointer;}非常方便,有时甚至在其他表单输入上也是如此,以给出视觉提示,表明这是可提交的表单,鼓励人们点击。
看一下http://rafael.adm.br/css_browser_selector/
这是一个小的JS文件,它会向您的body标签添加类,例如.webkit、.chrome等,您可以在样式表中使用它们。