Question

enter image description here 使用大图标时，图标区域周围会显示边框。

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>

Answer 1

试

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

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

Answer 2

我不完全确定导致此问题的原因。我可能值得将大纲设置为无，而不仅仅是边框。某些浏览器（如chrome）可能会使用它来指示元素的焦点（尽管我不记得在链接上看到它只发生在输入字段上）。另一件可能值得检查的事情是，这不是你图像中的人工制品。可能是你的边缘有白色的褪色，你是不是可以将它切成碎片。将它放在类似程序的Photoshop中的黑色背景上应立即显示。

此外，我不知道所有这些数据属性是什么，假设它们与您使用的某些jQuery插件有关。无论如何，我会在你的链接中设置一个ui-icon类，以确保border：none（和outline：none）明确地应用，因为从当前片段我不能说他们这样做。

Answer 3

-webkit-box-shadow：none;

这解决了这个问题。 enter image description here

CSS（JQUERY）：图标边框

3 个答案: