代码之家 › 专栏 › 技术社区 › asfsadf

CSS滑动窗口圆角按钮:如何避免“窗口”右侧的“死区”?

css html

asfsadf · 技术社区 · 16 年前

我使用的HTML/CSS如下。

当光标在.buttoner上时,没有:悬停效果,单击时也没有正确提交。右侧有一个6像素的死区,我正试图绕过它。有什么建议吗?在实现圆角按钮方面,我最初的方法有缺陷吗?

谢谢。< / P>

<span class=“buttoner”>
<input type=“submit”id=“updateReview”class=“buttonl”value=“保存更改”/>
L//Stand & Gt;

钮扣
{
字体大小:18px;
高度:26px;
填充:0px 0px 8px 6px;
背景色:透明;
背景图像:url(“../images/buttonl.gif”);
背景重复:无重复;
光标:指针;
页边:0px 0px 6px;
}

纽扣
{
浮动:左;
右侧填充:6px;
高度:26px;
背景色:透明;
背景:url(“../images/buttoner.gif”)无右上角重复滚动;
页边:0px 6px 0px 0px;
}
< /代码> 

更新:


所以我用Zzz的不同答案来解决“死区”问题:

<button type=“submit”class=“buttoner”>
跨类=“ButnOL”& gt;保存更改& lt//跨度& gt;
&按钮/按钮;
< /代码> 

但就我的生活而言,我无法在浏览器之间获得一致的垂直对齐。chrome和ie是对齐的,而firefox在.buttonl和.buttoner之间有2个像素的差异。


我听说过浏览器之间的差异,但我确信在某个地方有一个解决方法。我找不到…该死,这太令人沮丧了。


更新2


以下是我在一个小时的填充物和边缘问题之后得出的结论:

光标在上。按钮,没有:悬停效果,单击时也没有正确提交。右侧有一个6像素的死区,我正试图绕过它。有什么建议吗?在实现圆角按钮方面,我最初的方法有缺陷吗?

谢谢。

    <span class="buttonR">
<input type="submit" id="updateReview" class="buttonL" value="Save changes" />
    </span>

.buttonL
{
    font-size: 18px;
    height: 26px;
    padding: 0px 0px 8px 6px;
    background-color: transparent;
    background-image: url('../Images/buttonL.gif');
    background-repeat: no-repeat;
    cursor: pointer;
    margin: 0px 0px 0px 6px;
}

.buttonR
{
    float: left;
    padding-right: 6px;
    height: 26px;
    background-color: transparent;
    background: url('../Images/buttonR.gif') no-repeat scroll top right;
    margin: 0px 6px 0px 0px;
}


更新:

所以我用Zzz的不同答案来解决“死区”问题:

<button type="submit" class="buttonR">
  <span class="buttonL">Save Changes</span>
</button>


但就我的生活而言,我无法在浏览器之间获得一致的垂直对齐。chrome和ie是对齐的,而firefox在.buttonl和.buttoner之间有2个像素的差异。

我听说过浏览器之间的差异,但我确信在某个地方有一个解决方法。我找不到…该死,这太令人沮丧了。

更新第2号

以下是我在一个小时的填充物和边缘问题之后得出的结论:

3 回复 | 直到 16 年前

zzzzBov 16 年前

你必须检查一下它在IE等软件中是否有效:

<button type="submit" class="buttonR">
  <span class="buttonL">Save Changes</span>
</button>

我尽量避免按钮元素,但在这种情况下可能会对你有所帮助。

cac 16 年前

试试这个:

HTML:

<div class="cornerLeft"></div>
        <input type="submit" id="updateReview" class="buttonL" value="Save changes" />
<div class="cornerRight"></div>
<div class="clear"></div>

CSS:

 .cornerLeft, .cornerRight, .buttonL{
    float:left;
}
.cornerLeft{
    width:10px;/*the width of the left corner*/
    height:26px;
    background:#ffa;/*put url to image leftCorner*/
}
.cornerRight{
    width:10px;/*the width of the right corner*/
    height:26px;
    background:#ffa;/*put url to image rightCorner*/
}
.buttonL
{
    display:block;
    font-size: 18px;
    height: 26px;
    padding: 0px 6px 8px 6px;
    background-color: none;
    border:none;/*set to none*/
    background-image: url('../Images/buttonL.gif') no-repeat;

    background-repeat: no-repeat;
    cursor: pointer;
}

.buttonL:hover{
    background-image:url();/*enter your path here*/
    background:#ccc;/*set to none*/
}

.clear{
    clear:both;
    float:none;
}

行动起来看看 http://jsfiddle.net/2E2UJ/1/ 新链接!

您需要从用作按钮背景的图像的总宽度中减去左右两侧的填充。

JohnB 16 年前

jsFiddle demo

HTML

<span class="buttonR">
<input type="submit" id="updateReview" class="buttonL" value="Save changes" />
</span>

CSS

.buttonL, .buttonR
{
  height: 26px;
}
.buttonL
{
  font-size: 18px;
  padding: 0px 27px;
  background: transparent url('http://imgur.com/gGIYJ.png') no-repeat -2px left;
  cursor: pointer;
  margin-left; 6px;
}
.buttonR
{
  padding: 0px;
  background:transparent url('http://imgur.com/JnSVn.png') no-repeat -3px right;
}
.buttonR:hover{
  background-color:black;
}
.buttonL:hover{
  color:white;
}