在按钮内放置背景图像

Question

我使用这个网站，Responsinator 它为我提供了不同的屏幕分辨率，我的移动网站将在其上运行，并以以下输出屏幕分辨率/尺寸显示：

• iPhone 3+4 纵向·宽度：320px
• iPhone 3+4 横向·宽度：480px
• iPhone 5 纵向·宽度：320px
• iPhone 5 横向·宽度：568px
• Android纵向·宽度：240px
• Android横向·宽度：320px
• Android (Nexus 4) 纵向·宽度：384px
• Android (Nexus 4) 横向 · 宽度：600 像素
• iPad 纵向·宽度：768px
• iPad横屏·宽度：1024px
• Kindle 纵向·宽度：600px
• Kindle横向·宽度：1024px

我想加载shorter.css 的唯一时间是以下任何一种情况：

• iPhone 3+4 纵向·宽度：320px
• iPhone 5 纵向·宽度：320px
• Android纵向·宽度：240px
• Android横向·宽度：320px

这是wider.css 的 CSS：

<!--
button:before {
    content: " ";
    display: inline-block;
    background: url("../theImages/ste.png") no-repeat;
    height: 38px;
    line-height: 38px;
    vertical-align: middle;
    width: 52px;
    margin-right: 20%;
}
button {
    border: 1px solid rgba(0,0,0,0.3);
    background: #eee;
    color: #515151;
    font-size: 24px;
    font-weight: 700;
    padding: 21px 34px;
    text-decoration: none;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0.21, rgb(203,203,203)), color-stop(0.58, rgb(227,226,226)));
    background: -moz-linear-gradient(center bottom, rgb(203,203,203) 21%, rgb(227,226,226) 58%);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 0 5px rgba(255,255,255,0.3) /* glass edge */, inset 0 1px 0 0 rgba(255,255,255,0.5) /* top highlight */, inset 0 -3px 0 0 rgba(0,0,0,0.5) /* bottom shadow */;
    -webkit-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 1px 0 0 rgba(255,255,255,0.5), inset 0 -3px 0 0 rgba(0,0,0,0.5);
    box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 1px 0 0 rgba(255,255,255,0.5), inset 0 -3px 0 0 rgba(0,0,0,0.5);
    text-shadow: 0 1px rgba(255,255,255,0.6);
}
button::-moz-focus-inner, a.button::-moz-focus-inner {
    padding:0;
    border:0;
}
button:hover, a.button:hover {
    background: #cbcbcb;
    cursor: pointer;
}
button:active, a.button:active {
    background: #ccc;
    padding: 22px 34px 20px; /* Bump down text */
    -moz-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2);
    box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2);
    text-shadow: none;
}
.red {
    background: #e1001a;
    color: #fff;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0.21, rgb(192,0,22)), color-stop(0.58, rgb(226,0,26)));
    background: -moz-linear-gradient(center bottom, rgb(192,0,22) 21%, rgb(226,0,26) 58%);
    text-shadow: 0 1px rgba(0,0,0,0.25);
}
.red:hover {
    background: #cb0018;
    text-shadow: 0 1px rgba(0,0,0,0);
}
.red:active {
    background: #ae0014;
}
-->

shorter.css:

<!--
button:before {
    content: " ";
    display: inline-block;
    background: url("../theImages/ste.png") no-repeat;
    height: 38px;
    line-height: 38px;
    vertical-align: middle;
    width: 52px;
    margin: 0 auto;
}
button {
    border: 1px solid rgba(0,0,0,0.3);
    background: #eee;
    color: #515151;
    font-size: 24px;
    font-weight: 700;
    padding: 21px 34px;
    text-decoration: none;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0.21, rgb(203,203,203)), color-stop(0.58, rgb(227,226,226)));
    background: -moz-linear-gradient(center bottom, rgb(203,203,203) 21%, rgb(227,226,226) 58%);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 0 5px rgba(255,255,255,0.3) /* glass edge */, inset 0 1px 0 0 rgba(255,255,255,0.5) /* top highlight */, inset 0 -3px 0 0 rgba(0,0,0,0.5) /* bottom shadow */;
    -webkit-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 1px 0 0 rgba(255,255,255,0.5), inset 0 -3px 0 0 rgba(0,0,0,0.5);
    box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 1px 0 0 rgba(255,255,255,0.5), inset 0 -3px 0 0 rgba(0,0,0,0.5);
    text-shadow: 0 1px rgba(255,255,255,0.6);
}
button::-moz-focus-inner, a.button::-moz-focus-inner {
    padding:0;
    border:0;
}
button:hover, a.button:hover {
    background: #cbcbcb;
    cursor: pointer;
}
button:active, a.button:active {
    background: #ccc;
    padding: 22px 34px 20px; /* Bump down text */
    -moz-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2);
    box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2);
    text-shadow: none;
}
.red {
    background: #e1001a;
    color: #fff;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0.21, rgb(192,0,22)), color-stop(0.58, rgb(226,0,26)));
    background: -moz-linear-gradient(center bottom, rgb(192,0,22) 21%, rgb(226,0,26) 58%);
    text-shadow: 0 1px rgba(0,0,0,0.25);
}
.red:hover {
    background: #cb0018;
    text-shadow: 0 1px rgba(0,0,0,0);
}
.red:active {
    background: #ae0014;
}
-->

wider.css 看起来不错，因为文本和图像之间有一个空格，但对于 shorter.css，文本和图像太挤在一起了。我该如何修改，以便测试和图像之间有一点空间。截图如下：

Answer 1

你可以试试 jQueryUI 插件。它们将为您节省大量时间 -

https://jqueryui.com/button/#icons