0

在此处输入图像描述使用大图标时，图标区域周围会出现边框。

I have tried: 
.ui-icon {
border: none;
}

那不是解决方案。有什么想法或者你能指出我正确的方向吗？

<head>
<style type="text/css">
<!--
.ui-icon-green5{
background-image: url(green_05_64x64.png);
}
.ui-icon {
background-color: transparent;
width: 64px;
height: 64px;
border: none;
margin-top:150px;
margin-left:150px;
}

a{
    line-height: 600px; 
 }
-->
</head>
<body>
<div id="content2" style="background-color:#000000;height:400px;width:400px;float:left;">
        <a data-theme="a" id="start-button" data-iconpos="top" data-icon="green5"
          data-role="button"
          href="index.html"
          data-corners="false">LIVINGROOM</a>
      </div>
</body>
4

3 回答 3

1

尝试

.ui-icon {
   border: 0 !important;
}

如果这不起作用，边框必须在 png 本身上

于 2012-08-08T21:35:43.813 回答
0

-webkit-box-shadow：无；

这解决了问题。在此处输入图像描述

于 2012-08-09T06:54:15.867 回答
0

我不完全确定是什么导致了这个问题。我可能也值得将轮廓设置为无，而不仅仅是边框。某些浏览器，例如 chrome，可能会使用它来指示元素的焦点（尽管我不记得在链接上看到它，仅在输入字段上）。可能值得检查的另一件事是，这实际上是否不是您图像中的人工制品。可能是您在边缘处褪色为白色，您是否可能将其切片不正确。在类似 Photoshop 的程序中将它放在黑色背景上应该会立即显示出来。

另外我不知道所有这些数据属性的用途，假设它们与您使用的一些 jQuery 插件有关。无论如何，我会为您的链接设置一个 ui-icon 类，以确保明确应用边框：无（和大纲：无），因为从当前的片段中我不能说他们这样做。

于 2012-08-08T21:35:56.150 回答