Question

我有一个按钮，您可以看到here。看起来很好，对吗？在现场网站上，euroworker.no/shipping和/selectAddress看起来很紧张。

在Chrome，IE和Safari中渲染得很好，我认为它可能是一个FF问题，但是把小提琴加载到FF中似乎很好。

快速参考CSS和html：

#fortsett_btn  {
   background-image: url(http://euroworker.no/public/upload/fortsett.png?1269434047);
   background-repeat:no-repeat;
   background-position:left;
   background-color:none;
    border:none;
    outline:none;
   visibility: visible;
   position: relative;
   z-index: 2;
   width: 106px;
   height: 25px;
   cursor:pointer;
}

和HTML

<button type="submit" class="submit" id="fortsett_btn" title="Fortsett" value="">&nbsp;</button>

我想知道它是怎么回事。

Answer 1

而不是

<button type="submit" class="submit" id="fortsett_btn" title="Fortsett" value="">&nbsp;</button>

试试这个：

<button type="submit" class="submit" id="fortsett_btn" title="Fortsett" value="">Some value</button>

然后将text-indent:-999px;添加到您的CSS

这没有任何关系，为什么你的按钮在现场网站上不受影响，这只是一个建议。您按钮的样式可能不是因为您缺少样式表（错误的链接），请尝试将其设置为内联样式，然后如果可行则将样式复制到样式表

Answer 2

我不确定我是否理解这个问题。 CSS在每种情况下都不同。在小提琴上你有一个单独的图像，背景重复设置为不重复。在实际网站上，您有一个不同图像的切片，背景重复设置为repeat-x。这是两种不同的造型按钮的方式。

小提琴：

#fortsett_btn {
background-image:url("http://euroworker.no/public/upload/fortsett.png?1269434047");
background-position:left center;
background-repeat:no-repeat;
border:medium none;
cursor:pointer;
height:25px;
position:relative;
visibility:visible;
width:106px;
z-index:2;
}

住：

#product___specField_8  {
-moz-border-radius:5px 0 0 5px;
background-image:url("stylesheet/frontend/../../upload/orng_bg.png?1269434608");
background-repeat:repeat-x;
border:1px solid #DDDDDD;
float:left;
font-size:24px;
font-weight:bold;
height:33px;
padding-left:55px;
width:124px;
}

为什么你不期望看到不同的东西？

我的按钮背景似乎拉长了

2 个答案: