`

IE6 problem with LI spacing when display:block

阅读更多
#menu ul li a {
    padding-right: 20px;
    padding-left: 5px;
    font: normal normal 14px Verdana, Arial, sans-serif;
    /* STUpid f***ing browser alert! IE6 cannot handle this */
    display: block;
    }

当我们的li标签中有a标签,而a标签被设置display:block的话,IE跟FF中会产生不兼容(IE会无端端增加a的padding)。

非常奇怪,之前一直都没有注意到这个bug,由于我的编码习惯,这个bug刚好被我排除在外,主要原因是我通常在设置为blok的a标签中会加上height属性代码。

解决办法:加上Height 属性

分享到:
评论

相关推荐

    span掉落的演示代码

    标题“span掉落的演示代码”和描述中的问题,集中在`display:block-inline`这一属性上,它涉及到的是如何在保持元素内联特性的基础上,使它们具有块级元素的某些特性,比如占据一整行。 首先,我们需要理解CSS的`...

    HTML 网页设计

    nav.vertical ul li{ display:block;}/* vertical menu */ nav.horizontal ul li{ display: inline-block;}/* horizontal menu */ img{max-width:100%;} /*end reset*/ body, html { font-size: 100%; height: ...

    css display inline block 兼容性问题写法

    然而,当涉及到IE6和IE7这两种较早的浏览器版本时,会发现它们不支持display: inline-block属性,从而导致布局上的兼容性问题。 在IE6和IE7浏览器中,尽管使用display: inline-block无法正常工作,但是可以通过设置...

    css 清除浏览器默认样式

    /* reset */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,...}.container, .clearfix {display:block;}

    三星9305收索

    display:block;width:24px}#mCon .hw{text-decoration:underline;cursor:pointer;display:inline-block}#mCon .pinyin{display:inline-block}#mCon .c-icon-chevron-unfold2{margin-left:5px}#mMenu a{width:100%;...

    Proposal of switchable multiwavelength laser with continuously tunable spacing in MgO: APPLN waveguide

    A switchable multiwavelength laser with a continuously tunable spacing is proposed and illustrated based on cascaded interactions of the second harmonic and difference-frequency generations in an ...

    浅谈inline-block及解决空白间距

    需要注意的是,IE6 和 IE7 对 `display: inline-block` 的支持并不完全。虽然它们确实可以识别这个属性,但是表现不完美,特别是在处理空白间距问题上。为了使这些老版本的 IE 浏览器支持 `inline-block`,可以使用...

    html+css笔记.docx

    通过实际案例,我们可以看到`<a>`元素默认为行内元素,设置`display:inline`或`display:inline-block`可以在一行内显示,而`display:block`则会使`<a>`元素变成块级元素,占据整行并允许设置宽高。理解这些基本概念...

    html前端制作规范

    /* IE6兼容模式 */ } #colRightOne { width: 250px; float: right; } ``` #### 四、总结 通过上述分析,我们可以看出“html前端制作规范”主要关注的是代码的可读性、一致性以及与设计稿的高度还原度。这些...

    inline-block空隙之css letter-spacing与字体大小/字体关系数据表

    在多数情况下,设置负值的`letter-spacing`能够有效地减小或消除`inline-block`元素间的空隙,但并非所有浏览器都支持这种做法,尤其是旧版本的IE浏览器(如IE6/7)。 此外,不同字体类型似乎对`letter-spacing`的...

    个人文档1

    在早期版本的IE(如6和7)以及一些特定的浏览器模式(如搜狗兼容模式)中,使用inline-block时,块级元素可能会出现换行现象。这是因为这些浏览器并未完全支持inline-block,解决方法是在元素样式中添加`*display:...

    react-native-spacing-system:标准化ReactNative中组件的间距

    React Native Spacing系统 警告,您目前正在查看v2文档。 有关v1文档,请在。 它是什么? 使用边距和填充来控制组件之间的间距会引入太多方法来实现相同的目标。 React Native Spacing System试图标准化您的React ...

    css制作带箭头的css边框

    display: block; width: 0; height: 0; overflow: hidden; border-top: 12px solid #fff; border-left: 12px dotted transparent; border-right: 12px dotted transparent; margin-left: 50px; } /* hack...

    前端开源库-tachyons-spacing

    例如,结合使用`.bg-black`(黑色背景)、`.f6`(字体大小6)和`.dib`(display:inline-block)等其他Tachyons类,可以快速创建出符合设计规范的元素。 在压缩包“tachyons-spacing-master”中,包含了tachyons-...

    JS实现4位随机验证码

    display: inline-block; letter-spacing: 3px; border: 1px solid red; } #div{ height: 20px; margin-bottom: 10px; } #btn,p:hover{ cursor: default; } button{ display: block; } 主体部分 <div id=...

    Allegro:基本约束主要是Physical与Spacing

    Allegro 基本约束主要是 Physical 与 Spacing Allegro 是一款专业的 PCB 设计软件, 它提供了强大的设计约束功能,帮助设计者快速实现高质量的 PCB 设计。在 Allegro 中,基本约束主要是 Physical 与 Spacing,这两...

    letter-spacing:为浏览器和node.js在字符串中添加字母间距。 有或没有~~你~~承诺

    字母间距 为浏览器和node.js在字符串中添加字母间距。 有还是没有你承诺。 特征 ... const { spaced } = require ( 'letter-spacing' ) let example = 'YOU PUT AT RISK MILLIONS OF PEOPLE' proc

    spacing-helper:一个微小(117 字节)且速度极快的独立助手,用于在 UI 元素之间创建一致的间距

    间距助手 ...npm i spacing-helper或yarn add spacing-helper 动机 让我们看看一些代码 const HeaderStyled = styled . header ` margin: 16px 24px; ... ` ; 使其一致 const MODULE = 8 ; const

    css试题及答案.pdf

    为解决这个问题,可以使用`clearfix`类或者添加`display:inline-block`,而不是`display:block`,因为`display:block`不会清除浮动。 6. "滑动门技术"是CSS布局技巧之一,利用背景图片的位置变化实现按钮或其他元素...

Global site tag (gtag.js) - Google Analytics