ul在Firefox和IE下的不同表现

最新推荐文章于 2024-10-01 23:20:42 发布

caiyakang

最新推荐文章于 2024-10-01 23:20:42 发布

阅读量346

点赞数

分类专栏： CSS 文章标签： firefox ie 浏览器 css

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

ul是一个很常用的标签，但是因为它在Firefox和IE下的不同表现，让人觉得它是个很难以控制的标签。　　ul在Firefox下有个padding值，却没有margin值；而在IE下正好相反，ul有个margin值，却没有padding值。【下图中的第二第三例的对照可以看出】　　在Firefox下，ul的list-style默认是处于内容的外边缘的。当然可以通过css可以将list-style置为内容的内边缘。　　通过权衡得到适合两个浏览器的设置：padding:0; margin:0; list-style:inside;。还可以将ul设置为padding:0; margin:0; list-style:none;，然后给li添加背景图片，也是很不错的选择。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

caiyakang CSDN认证博客专家 CSDN认证企业博客

码龄18年

5: 原创

141万+: 周排名

183万+: 总排名

5226: 访问

: 等级

127: 积分

1: 粉丝

0: 获赞

7: 评论

0: 收藏

私信

关注

热门文章

分类专栏

.NET
CSS 1篇

最新评论

URL字符串相关操作处理
caiyakang: this.AppendKey=function(url,key,newValue) //对URL中追加字符,如果字符存在,则替换 { var index=url.indexOf("?",0); if(index==0) return this.AppendSearchKey(url,key,newValue); //第一个为问号说明为参数 var href=url; if(index==-1) //不存在问号,不带参数的URL地址 { _queryString="?"+key+"="+newValue; } else if(index==url.length-1) //最后一个字符问号,成为不带参数的URL地址 { _queryString=+key+"="+newValue; } else { var href=url.substr(0,index); var queryString=url.substr(index); var dictionary=this.SplitQueryString(queryString); var found=false; for(var i=0;i<dictionary.keys.length;i++) { if(dictionary.keys[i]==key) { dictionary.values[i]=newValue; found=true; break; } } //如果没有匹配的,则追加 if(!found) { dictionary.keys.push(key); dictionary.values.push(newValue); } var _queryString=this.JoinQueryString(dictionary.keys,dictionary.values); } return href+_queryString; }
自动调用对象位置
caiyakang: /* 函数名 : AutoPosition 功能 : 自动调用对象位置作者 : caiyakang email : caiyakang@qq.com 参数 : referElement : 参照对象 targetElement : 放置对象 offset : targetElement 对象在位置中的偏移 {height:1,width:1} defaultPositionType : 默认的显示位置,如上左,上右,下左,下右上:referElement正上方右:以referElement左边距离为起始点,向右增加下:referElement正下方左:以referElement左边距离为起始点,向右减少 */
自动调用对象位置
caiyakang: this.GetBottomLeft = function () { var position = { top: 0, left: 0 }; if (!isOver[2] && !isOver[3]) { position.top = elementBottom; position.left = elementLeft; return position; } if (isOver[2] && (location.absoluteTop > pageHeight - location.absoluteTop - referElementHeight)) { return this.GetTopLeft(); } position.top = elementBottom; position.left = elementLeft; if (isOver[3]) position.left = 0; return position; } //计算超出 var position = this.GetPosition(); if (offset) { position.top += offset.height; position.left += offset.width; } targetElement.style.top = position.top + "px"; targetElement.style.left = position.left + "px"; }
自动调用对象位置
caiyakang: this.GetBottomRight = function () { var position = { top: 0, left: 0 }; if (!isOver[2] && !isOver[1]) { position.top = elementBottom; position.left = elementRight; return position; } //如果底部超出，并且上面距离小于下面距离 if (isOver[2] && (location.absoluteTop > pageHeight - location.absoluteTop - referElementHeight)) { return this.GetTopRight(); } position.top = elementBottom; position.left = elementRight; if (isOver[1]) position.left = pageWidth - targetElementWidth; return position; }
自动调用对象位置
caiyakang: this.GetTopLeft = function () { var position = { top: 0, left: 0 }; if (!isOver[0] && !isOver[3]) { position.top = elementTop; position.left = elementLeft; return position; } //如果顶部超出，并且上面距离小于下面距离 if (isOver[0] && (location.absoluteTop < pageHeight - location.absoluteTop - referElementHeight)) { return this.GetBottomLeft(); } position.top = elementTop; position.left = elementLeft; if (isOver[3]) position.left = 0; return position; }

最新文章

目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。