0

相同的图像在 Mozilla 中看起来很完美，在 Chrome 中浏览时看起来不完美。这是图像。谁能建议我为什么会出现这些类型的错误以及如何解决它。

第一个是 Mozilla，第二个是 Chrome。

Mozilla铬合金

CSS代码是，

.freeimg
{
    position            : relative;
    top                 : 80px;
    border              : 1px solid #CCCCCC;
    border-right        : 0;
    background-color    : #FFF;
    cursor              :  pointer;
    margin-left         : -35px;
    -moz-border-radius  : 10px 0px  0px 10px;
}

HTML 代码和往常一样正常。

<div class="fl freeimg" style="float:left;">
 <img src="/images/freeImg.gif" height="160" width="32" onClick="SlideMe()" />
</div>
4

4 回答 4

2

添加font-size:0

HTML

<div class="fl freeimg">
 <img src="http://www.brightpay.co.uk/i/signup-launcher.png" onClick="SlideMe()" />
</div>​

CSS

 .freeimg
{
    position            : relative;
    float:left;
    top                 : 80px;
    border              : 1px solid #CCCCCC;
    border-right        : 0;
    background-color    : #FFF;
    cursor              :  pointer;
    border-radius  : 10px 0px  0px 10px;
    font-size:0
}    
.freeimg img
{        
    border-radius  : 10px 0px  0px 10px;
     margin:0; padding:0
}​

演示

于 2013-01-02T07:49:25.377 回答
1

如果您为此目的动态更改 css，请使用 javascript 检查条件

if (navigator.appVersion.indexOf("Chrome/") != -1) {
 // modify button 
}

在这下给你的css更改只适用于chrome

于 2013-01-02T07:41:32.657 回答
1

首先尝试通过加载样式表来重置 CSS，例如此处解释的样式表：

http://developer.yahoo.com/yui/reset/

浏览器有不同的默认值，除非您用自己的设置覆盖这些值，否则它们可能仍然适用。在您的特定情况下，我会尝试添加：

padding: 0;
margin: 0;

看看这是否消除了差异。但是reset.css如上所述使用 a 是避免这种差异的最佳实践。

于 2013-01-02T07:47:05.157 回答
0

您必须编写条件 css 注释来解决此类问题。这不过是一个CSS问题。请发布您的代码。可能对解决这个问题有用

就像下面的代码

检查 firefox 中的元素并为 firefox 浏览器调整 css 样式单独的 css 文件并添加以下代码

if ( $.browser.mozilla == true ) { document.write(""); }

于 2013-01-02T07:36:20.047 回答