Question

我正在构建一个html菜单，我正在使用jQuery UI来格式化按钮。我想创建一个仅图标按钮。对于Windows 7上的IE 9，Chrome和Safari，一切正常。它也适用于OS X上的Chrome，但不适用于OS X上的Safari。

我在网页上与Google地图进行了互动。如果我不创建地图，菜单将使用仅图标按钮正确呈现。但如果我创建地图，菜单就会消失。

将按钮text属性设置为false时发生故障。我试过这两种方式

（1）

$("#zoomIn").button({ icons: { primary: 'ui-icon-zoomin' }, text: false });

（2）

$("#zoomIn").button({ icons: { primary: 'ui-icon-zoomin' } });
$("#zoomIn").button("option", "text", false);

如果我没有设置此属性，菜单会正确显示，但按钮中有文字。

按钮的HTML是

<button id="zoomIn">xxx</button>

我包含以下文件（这些来自jQuery UI演示页面）

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript"></script> 
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>

我尝试过将jQuery库包含在本地副本中。

我对这个感到困惑。希望其他人遇到这个问题并解决它。非常感谢任何帮助。

Answer 1

最后追查了这个问题。

我正在使用jQuery UI样式表，其中有一个样式

.ui-button-icon-only .ui-button-text, .ui-button-icons-only 
.ui-button-text { padding: .4em; text-indent: -9999999px; }

将text-indent设置为-999px;解决了这个问题。

在Mac OS X 10.5上将jQuery UI按钮文本设置为false，无法在Safari中使用

1 个答案: