ie6下按钮下边框消失不显示的问题

最近网站做改版,又发现一个ie6奇葩的问题,就一个很普通带边框的按钮,但在ie6中下边框不显示,ie7没有测试不知道是不是也不显示,其他浏览器正常

代码和预览效果如下:

<style>

body{ font-size:12px; font-family:tahoma,arial,verdana,\5b8b\4f53,sans-serif; color:#666;}

.btn{ display:inline-block; line-height:23px; padding:0 10px; border:solid 1px red; text-decoration:none; vertical-align:middle;}

</style>

<a class="btn" href="#">一个按钮</a>

这里先说下自己的解决办法。通过测试发现多种办法可以解决此问题

1、body字体声明改为arial默认font-family:arial,tahoma,verdana,\5b8b\4f53,sans-serif

2、去掉按钮的vertical-align值

3、把按钮block、浮动等

测试猜想应该是字体和vertical-align:middle引起的问题???

时间: 2024-08-29 17:40:25

ie6下按钮下边框消失不显示的问题的相关文章

解决linux环境下qt groupbox 边框不显示问题

ps:实践是检验真理的唯一标准真的是没错,以为很简单一件事情,往往被自己搞的很复杂,这里记录下 在windows环境中Qt创建一个groupbox自动显示边框, 效果如下 然而在linux环境中Qt创建一个groupbox,边框竟然消失了 如图 然后以为是GroupBox的属性设置问题 结果在属性里面找了半天没有发现对应属性. 最后右键改变样式表解决 最后效果 ps:实践出真知啊! 解决linux环境下qt groupbox 边框不显示问题,布布扣,bubuko.com

【css】a:hover 设置上下边框在 ie6 和 ie7 下失效

前段时间在写样式的时候发现了这个问题,虽然当时就解决了这个 bug 不过还是记录下,以免再次出现这样的问题. demo 代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"

ie6、7下button添加背景和边框,内边距会出现1px的边框

ie6.7下button添加背景和边框,内边距会出现1px的空白边框 解决办法:在input外面加上一个标签,把背景和边框都写在标签的样式上面,input的 background和border都none. span { display:inline-block; width:40px; height:20px;border-radius: 2px; background:url(images/btnBg.gif) repeat-x;} input {width:40px; height:20px

Bootstrap系列 -- 34. 按钮下拉菜单

按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的.不同的是在普通的下拉菜单的基础上封装了按钮(.btn)样式效果.简单点说就是点击一个按钮,会显示隐藏的下拉菜单.按钮下拉菜单其实就是普通的下拉菜单,只不过把“<a>”标签元素换成了“<button>”标签元素.唯一不同的是外部容器“div.dropdown”换成了“div.btn-group”. <div class="btn-group"> <button class=&quo

按钮下拉菜单

按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的.不同的是在普通的下拉菜单的基础上封装了按钮(.btn)样式效果.简单点说就是点击一个按钮,会显示隐藏的下拉菜单. 按钮下拉菜单其实就是普通的下拉菜单,只不过把“<a>”标签元素换成了“<button>”标签元素.唯一不同的是外部容器“div.dropdown”换成了“div.btn-group” <div class="btn-group"> <button class=&quo

解决Button在IE6、7下的自适应宽度问题

很早就遇到过这么个小问题,但由于其并未影响到实际作用和美观就没有正面解决它,现在,我们来试着解决它. 写一个Button,有两种方式:其一,直接button标签:其二,input type=”button”. 不管哪种方式,Button的宽度在IE6.7下总是不能完美,接下来我们演示一个普通的Button,你可以用IE6或者IE7浏览器看看其显示宽度,然后对比Chrome或者IE8等浏览器,你会发现Bug的所在. 1.一个普通的Button: 可以很直接的看到Button的两边有空隙,当然,这个

Bootstrap&lt;基础十四&gt; 按钮下拉菜单

使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class="caret"></span> 来指示按钮作为下拉菜单. 下面的实例演示了一个基本的简单的按钮下拉菜单: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 基本的按钮下拉菜单&

CSS IE6、7下关于Position的一个bug问题分享

又好久没来了,小码哥甚是想念 想念我的人.由于近期工作中跟CSS打交道较多,所以偶尔会碰到有关它的一些问题,CSS很强大,尤其是后来的CSS3.鄙人正在学习中,如果就所遇到的问题,分析有偏差,望大家海涵哈!!下面就说说我刚刚遇到的一个问题,也许某些前辈大拿们会在心里BS我,不过对我来说,都是收获!嘎嘎,, 总所周知,我们都知道CSS中的定位position属性是一个相当重要和特殊的属性.它分别有一下几个属性值: position:relative; position:absolute; posi

IE6、7下块级元素设置display:inline-block不换行的解决办法

使用背景 在实际的工作中,我们有的时候会把块元素设置为inline-block,这样做的目的有2个,一是块元素能够排列到一行,二是块元素就形成包裹性,能够自适应content area,而不必设置宽和高(依实际情况而定),在现在浏览器中没有什么问题,但是IE6.7下,当把block元素设置成inline-block之后,还是在分别的两行,下面我们看一下现象. 代码以及IE6.7下的表现 CSS: body { padding: 10px; } .block_to_inlineblock, .in