• 关于 IE6下Li标签 的搜索结果

问题

JavaScript获取元素节点,兼容IE低版本浏览器,但是IE7中无法识别ul标签下的li标签之后的span和a标签。

杨冬芳 2019-12-01 20:07:11 1131 浏览量 回答数 1

回答

因为标签之间有空白字符造成的。解决办法有很多,margin负值、font-size:0等等。去除inline-block元素间间距的N种方法 一、现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="submit" /> 间距就来了~~表单控件之间的间距例子 我们使用CSS更改非inline-block水平元素为inline-block水平,也会有该问题: .space a { display: inline-block; padding: .5em 1em; background-color: #cad5eb; } <div class="space"> <a href="##">惆怅</a> <a href="##">淡定</a> <a href="##">热血</a> </div> inline-block水平元素间的间距示意 张鑫旭-鑫空间-鑫生活 您可以狠狠地点击这里:inline-block元素间间距demo 这种表现是符合规范的应该有的表现(如果有人认为是bug就太()ay ()oy 了)。 不过,这类间距有时会对我们布局,或是兼容性处理产生影响,需要去掉它,该怎么办呢?以下展示N种方法(欢迎补充)! 二、方法之移除空格 元素间留白间距出现的原因就是标签段之间的空格,因此,去掉HTML中的空格,自然间距就木有了。考虑到代码可读性,显然连成一行的写法是不可取的,我们可以: <div class="space"> <a href="##"> 惆怅</a><a href="##"> 淡定</a><a href="##"> 热血</a> </div> 或者是: <div class="space"> <a href="##">惆怅</a ><a href="##">淡定</a ><a href="##">热血</a> </div> 或者是借助HTML注释: <div class="space"> <a href="##">惆怅</a><!-- --><a href="##">淡定</a><!-- --><a href="##">热血</a> </div> 等。 三、使用margin负值 .space a { display: inline-block; margin-right: -3px; } margin负值的大小与上下文的字体和文字大小相关,其中,间距对应大小值可以参见我之前“基于display:inline-block的列表布局”一文part 6的统计表格:inline-block元素间间隔大小与字体和文字大小之前的关系表截图 例如,对于12像素大小的上下文,Arial字体的margin负值为-3像素,Tahoma和Verdana就是-4像素,而Geneva为-6像素。 由于外部环境的不确定性,以及最后一个元素多出的父margin值等问题,这个方法不适合大规模使用。 四、让闭合标签吃胶囊 如下处理: <div class="space"> <a href="##">惆怅 <a href="##">淡定 <a href="##">热血</a> </div> 注意,为了向下兼容IE6/IE7等喝蒙牛长大的浏览器,最后一个列表的标签的结束(闭合)标签不能丢。 在HTML5中,我们直接: <div class="space"> <a href="##">惆怅 <a href="##">淡定 <a href="##">热血 </div> 好吧,虽然感觉上有点怪怪的,但是,这是OK的。 您可以狠狠地点击这里:无闭合标签去除inline-block元素间距demo 无闭合标签与inline-block水平元素间距的去除 张鑫旭-鑫空间-鑫生活 五、使用font-size:0 类似下面的代码: .space { font-size: 0; } .space a { font-size: 12px; } 这个方法,基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。不过有个浏览器,就是Chrome, 其默认有最小字体大小限制,因为,考虑到兼容性,我们还需要添加: 类似下面的代码: .space { font-size: 0; -webkit-text-size-adjust:none; } 您可以狠狠地点击这里(去年制作的一个简单demo):font-size:0清除换行符间隙demo 补充:根据小杜在评论中中的说法,目前Chrome浏览器已经取消了最小字体限制。因此,上面的-webkit-text-size-adjust:none;代码估计时日不多了。 六、使用letter-spacing 类似下面的代码: .space { letter-spacing: -3px; } .space a { letter-spacing: 0; } 根据我去年的测试,该方法可以搞定基本上所有浏览器,包括吃“东鞋”、“西毒(胶囊)”、“南地(沟油)”、“北钙(三鹿)”的IE6/IE7浏览器,不过Opera浏览器下有蛋疼的问题:最小间距1像素,然后,letter-spacing再小就还原了。 七、使用word-spacing 类似下面代码: .space { word-spacing: -6px; } .space a { word-spacing: 0; } 一个是字符间距(letter-spacing)一个是单词间距(word-spacing),大同小异。据我测试,word-spacing的负值只要大到一定程度,其兼容性上的差异就可以被忽略。因为,貌似,word-spacing即使负值很大,也不会发生重叠。 您可以狠狠地点击这里:word-spacing与元素间距去除demo 与上面demo一样的效果,这里就不截图展示了。如果您使用Chrome浏览器,可能看到的是间距依旧存在。确实是有该问题,原因我是不清楚,不过我知道,可以添加display: table;或display:inline-table;让Chrome浏览器也变得乖巧。 .space { display: inline-table; word-spacing: -6px; } 八、其他成品方法 下面展示的是YUI 3 CSS Grids 使用letter-spacing和word-spacing去除格栅单元见间隔方法(注意,其针对的是block水平的元素,因此对IE8-浏览器做了hack处理): .yui3-g { letter-spacing: -0.31em; /* webkit */ *letter-spacing: normal; /* IE < 8 重置 */ word-spacing: -0.43em; /* IE < 8 && gecko */ } .yui3-u { display: inline-block; zoom: 1; *display: inline; /* IE < 8: 伪造 inline-block */ letter-spacing: normal; word-spacing: normal; vertical-align: top; } 以下是一个名叫RayM的人提供的方法: li { display:inline-block; background: orange; padding:10px; word-spacing:0; } ul { width:100%; display:table; /* 调教webkit*/ word-spacing:-1em; } .nav li { *display:inline;} 也就是上面一系列CSS方法的组组合合。

杨冬芳 2019-12-02 02:43:16 0 浏览量 回答数 0

回答

HTML标签在浏览器中都有默认的样式,不同的浏览器的默认样式之间存在差别。例如ul默认带有缩进样式,在IE下,它的缩进是由margin实现的,而在Firefox下却是由padding实现的。开发时浏览器的默认样式可能会给我们带来多浏览器兼容性问题,影响开发效率。现在很流行的解决方式是一开始就将浏览器的默认样式全部覆盖掉,这就是css reset。部分css reset内容如下:html {color:#000;background:#FFF;}t5body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table {border-collapse:collapse;border-spacing:0;}fieldset,img {border:0;}address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;}li {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}q:before,q:after {content:'';}abbr,acronym {border:0;font-variant:normal;}sup {vertical-align:text-top;}sub {vertical-align:text-bottom;}input,textarea,select {font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select {*font-size:100%;}legend {color:#000;}

tama_test 2019-12-02 00:58:34 0 浏览量 回答数 0

中小企业与商标那些事

企业品牌保护从商标开始,如何挑选一家靠谱的渠道注册商标,解读品牌权益维护的重要节点。

问题

创建定制的jQuery Mobile主题 - jQuery报错

montos 2020-06-04 14:18:42 5 浏览量 回答数 1

问题

【精品问答】前端开发必懂之CSS技术八十问

茶什i 2019-12-01 22:00:52 1642 浏览量 回答数 1

问题

【CSS学习全家桶】416道CSS热门问题,阿里百位技术专家答疑解惑

管理贝贝 2019-12-01 20:07:24 8458 浏览量 回答数 1
阿里云大学 云服务器ECS com域名 网站域名whois查询 开发者平台 小程序定制 小程序开发 国内短信套餐包 开发者技术与产品 云数据库 图像识别 开发者问答 阿里云建站 阿里云备案 云市场 万网 阿里云帮助文档 免费套餐 开发者工具 云栖号物联网 小程序开发制作 视频内容分析 企业网站制作 视频集锦 代理记账服务 2020阿里巴巴研发效能峰会 企业建站模板 云效成长地图 高端建站 云栖号弹性计算 阿里云云栖号 云栖号案例 云栖号直播