懂css的帮我看看这个图，谢谢!_html/css_WEB-ITnose

我做了一个按钮放在导航菜单上，按钮是透明的，可是如图红圈处出现了错误！

1.我用的浏览器都出现这个问题，IE、MATHON遨游、firefox都这样
2.用PS做的按钮，格式有两个png格式的和gif格式的，两个都会出现这个问题
3.用滑动门实现的，但我是有css基础的，我自认为自己不是在css知识上出错

这个是不是bug,还是什么导致的？有什么解决办法，thankyou!

回复讨论(解决方案)

那是图片的事吧？角没去掉吧

看看是不是你图片的问题？

这个应该是图片问题吧

图片背景没有去掉  这个我肯定

圆角幅度大的应该用左右两张图片，你用一张图片就会出现这种情况

那是图片的事吧？角没去掉吧

不是图片的问题，图片就是一个做好的效果圆角，并没有出现红圈圈的错误

 图片没切割好

图片背景没有去掉  这个我肯定

背景去掉了，留下就是透明部分了

图片没有问题

问题如图!

自适应按钮，把样式发上来吧

图片没有问题
哎，都告诉你用两张图片，不要用一张图片，左边的图片宽度小点。
出现这种情况是因为你用了两次图片背景，右边边框不透明是因为外层的背景，内层的背景是透明的。

如果你用一张图片，无法控制外层背景图片的宽度。

ok

好航条的CSS:

#menu{
background:url(../images/menu.jpg) no-repeat 0 0;
width:1000px;
height:40px;
text-align:center;
padding-left:15px;
}
#menu li{
float:left;
margin:0 50px;
}
#menu li a{
display:block;
text-decoration:none;
color:white;
vertical-align:middle;
line-height:40px;
}
#menu li a:hover{
background:url(../images/menu_hover.gif) no-repeat top left;
vertical-align:middle;
padding:0 0 0 10px;
margin:-10px;
color:#333;
margin-top:5px;
}
#menu li a:hover strong{
display:block;
background:url(../images/menu_hover.gif) no-repeat top right;
line-height:30px;
vertical-align:middle;
padding:0 10px 0 0;
margin-top:5px;
}

ie6 不支持png透明背景

不是ie6，但出现了这些问题，而且多个浏览器出现这种状况

#menu li a:hover{background:url(../images/menu_hover.gif) left 0;  color:#fff; text-decoration:none; line-height:30px; height:30px; float:left}

#menu li a:hover strong{background:url(../images/menu_hover.gif) right 0; padding-right:10px; margin-left:10px; float:left; height:30px}

方式是这样，剩下自己调

#menu li a:hover{background:url(../images/menu_hover.gif) left 0;  color:#fff; text-decoration:none; line-height:30px; height:30px; float:left}

#menu li a:hover strong{background:url(../images/men……

没有效果，应该不是css问题

直接在这样就能看到效果

a{background:url(../images/menu_hover.gif) left 0; color:#fff; text-decoration:none; line-height:30px; height:30px; float:left}

a strong{background:url(../images/menu_hover.gif) right 0; padding-right:10px; margin-left:10px; float:left; height:30px}

测试

直接在这样就能看到效果

a{background:url(../images/menu_hover.gif) left 0; color:#fff; text-decoration:none; line-height:30px; height:30px; float:left}

a strong{background:url(../images/menu_hover.gif) rig……

照你的改了，但是没有效果，不是css问题

是不是以前有图片，图片没改成新的？
可以看看文件夹下是不是真有这事

明显图片长度就不一样

明显图片长度就不一样

还是原来的图片，并不是改成新的问题，究竟出现这个问题是不是bug?

刚才研究了一下，自适应圆角按钮的背景图是要有背景色才能生效，左边的角可以没有背景色但右边一定要有

清一下历史记录试试呢？我咋感觉你下面发的单独的图片比实际效果图要宽许多呢？

清一下历史记录试试呢？我咋感觉你下面发的单独的图片比实际效果图要宽许多呢？
无效啊，哎！

算了，亲们帮我解决这个问题我帮分数给你们


javascript中如何改变全局变量值?
<script> <br /> var k=2; <br /> function explus(){ <br /> k=k+1; <br /> alert(k); <br /> } <br /> </script>
弹出来是三，我想实现每单击一次按钮弹出的k值增加1，但是全局变量的值怎么老是改不了？

呵呵，不是css的问题，是图片，你在放大些，就能看的出，用ps切掉就行了，我曾经遇到的问题，

javascript中如何改变全局变量值?
<script> <br /> var k=2; <br /> function explus(){ <br /> k=k+1; <br /> alert(k); <br /> } <br /> </script>

  var k=2;??不是全局?量吧.

javascript中如何改变全局变量值?
<script> <br /> var k=2; <br /> function explus(){ <br /> k=k+1; <br /> alert(k); <br /> } <br /> </script>

  var k=2;??不是全局?量吧.

亲！我的问题你没有看清楚，每一次点击按钮弹出k的值增加1
var k=2这个是声明全局变量！但是要在explus函数把全局变量k的值+1却有没有效果，全局变量k的值还是2!

所以要怎样改变全局变量k的值，我那样做全局变量k没有改变!

两个方法
1,把透明图片做成不透明的
2,将图片切开上下错位

（--
    ----------）
就像这个样子，修改background-position

亲们，这个问题能否帮帮忙解决，thankyou!

javascript中如何改变全局变量值?
<script> <br /> var k=2; <br /> function explus(){ <br /> k=k+1; <br /> alert(k); <br /> } <br /> </script>

亲们，这个问题能否帮帮忙解决，thankyou!

javascript中如何改变全局变量值?
<script> <br /> var k=2; <br /> function explus(){ <br /> k=k+1; <br /> alert(k); <br /> } <br /> </script>

我的实验结果表示很正常

除非有页面回发了，要是页面回发，那就把k设置到后台去，js调用后台的方法处理并获取k的值

1.清理浏览器缓存文件。
2.看看是不是给图片设置了背景色，或是在图片下层的元素设置了背景色。
3.最好用Gif格式的图片。

还是不行，哎...

还是不行，哎...
那就是你图片的问题了，用PS重新处理一下。

正在google找button点击时自适应宽度的背景错位问题，无意中看到这个帖子……

你给li加一格padding-right:(转角的宽度)6px；
然后给a加一个padding-left：和上面相同的宽度值，就好了。

你这样做，要求背景图足够宽。
一般我们的做法的把图片拆成两行，li的背景只是一个转角部分。
a的背景是一个转角+横铺部分。

抱歉，看错了，你代码没什么问题，是图片的问题。
下面的层，完整显示了按钮，直接铺到了右侧按钮结束。
上面的层，背景居右，边角透明，所以透出了下面的图。
建议把图片作成两行，第一行只有左侧边角，第二行没有左侧边角，右侧一直到出现边角为止。

下面的层，背景图定位left top，上面的strong的背景定位right bottom就好了。