关注官方微博有惊喜！
怎样去掉图标模糊的虚边
来源：优设&&&作者：adminli&&&发布时间：&&&
浏览次数：6122
收藏分享到：
一些本来尺寸很大，质量很不错的高清png图片，经过缩小转为icon时却变得惨不忍睹（图标的细节损失严重）而当我们去看那些专业人士制作的icon时，却发现，对方制作的icon尺寸虽小，但是细节却保持的非常好，这里面难道有什么技巧么？今天分享一篇关于利用Photoshop cs6网格对齐功能绘制高清icon的文章。
Photoshop CS6自发布以来，一直颇受好评，细心的朋友可能发现最新的PS CS6支持矢量对象绘制、变换时像素自动对齐网格，而且非常好用。PS CS6的像素自动对齐网格功能在绘图过程中，无疑方便了很多，不必再担心图形边缘会出现模糊，但是我们在实际的图形设计过程中会发现，还是会经常需要调整一些路径没有完全对齐到网格产生的半透明的过渡像素，用来平滑图形边缘减少锯齿感，或让图形看上去更饱满、更细腻，我们称其为次像素 (或亚像素，Sub-pixel，一般用于屏幕显示技术等领域)，如下图所示。
一、像素对齐网格
1. 对象绘制时像素对齐网格
像素对齐网格最大的作用就是避免绘制图形时出现虚边，解决图形模糊的问题，尤其是将画布放大数倍去抠界面、图标细节时，精度可以达到像素级，让设计师将精力更多的集中在创意表达层面，不必因为担心模糊而谨慎的去操作，从而提高工作效率。
在PS CS6初始状态时，只有当画布在100%比例下，也就是实际像素比例时，画出来的图形才不会模糊，放大或缩小画布到其他比例下，即使打开网格进行辅助，画出来的图形也会模糊，如图2所示，蓝色图形与紫色图形分别为100%画布下不打开网格，和非100%比例画布下打开网格随意绘制的相同大小的矩形，我们能明显的看到紫色图形边缘非常的模糊。
这时的网格没有起到作用，是因为在PS CS6初始状态时，网格的参数不是以像素为单位，而是毫米，如图3，首选项窗口可以通过主菜单中&编辑&首选项&常规&或快捷键Ctrl+K来打开。
想要在常规图形 (矩形、圆角矩形、圆形) 绘制过程中，使像素在任何情况下都对齐网格，在PS CS6的首选项窗口中，对&参考线、网格和切片&选项卡的网格参数进行简单的设置，并配合快捷键就可以做到。
图3中可以看到网格线间隔的默认值是25毫米，将单位改为像素，这时单位前面的数值会自动变为1，这时的网格线并未与画布上的像素格对齐，需要手动重新输入数值，且网格线间隔数值与子网格数值必须相等，图4展示的是在3200%比例下，两种不同数值网格所呈现出的效果，可根据自己的喜好进行调整。网格可通过主菜单&视图&显示&网格&来显示或隐藏，快捷键为Ctrl+&(回车左侧的引号键)。
完成了如上设置，最后确保&主菜单&视图&对齐&及&对齐到&网格&两个选项已勾选，&对齐到&网格&选项在打开显示网格的情况下才可编辑。
像素对齐网格设置完成，以后在非100%视图下绘制常规图形，只要打开网格辅助，就不会出现模糊情况。像素对齐网格在PS CS6中还是存在一定的局限性，受到图形形状的约束，当使用线条工具、多边形工具、自定义形状工具绘制一些带有倾斜边缘或非直角的图形时，还是无法保证所有角点和边缘对齐网格，当然这里的模糊更多的是防锯齿效果，可以利用网格手动调整。
2. 对象变换时像素对齐网格
PS CS6中，长宽都是奇数或都是偶数时，进行90&变换时都可以对齐像素，当长宽数值分别是奇数和偶数时，再进行顺时针或逆时针90&变换就会使图形模糊，无法对齐到像素，这时可以先旋转，然后打开网格进行辅助，不要退出自由变换模式，拖动对象，这时边缘就会自动吸附对齐网格，如下图：
二、利用次像素让图形更饱满
举个小例子，看看次像素在图形设计中的作用，抛砖引玉。
在界面设计中，经常会绘制下拉菜单等控件上的三角形箭头形状，最常见的做法就是用铅笔工具点象素画出来，如图4-a所示，看上去很清晰，但在分辨率较小的屏幕上看，会稍显生硬、有锯齿感，影响界面的细腻度；用路径对齐网格绘制箭头，如图4-b所示，解决了锯齿问题，但看上去体量感被削弱了，不够饱满；图4-c中所示的效果，是对次像素微调后的效果，既消除了锯齿，而且在体量感上不输第一种方案的效果。
没看出差别？我们将三种方案放在一起对比下，见图8，从左至右依次为图4中的a、b、c方案，我们看到中间的b方案虽然没有了锯齿，但体量上明显小于a、c方案，而c方案同时具备无锯齿、相等的体量感两个优点。
通过放大图片我们可以看到在次像素上的差别，要达到方案c的方法其实很简单，看看下图放大的效果和路径你就明白了。
只要将角点上的路径锚点分别向外移动一点，让原本颜色比较淡的次像素稍微加深就可以了，操作时，放大画布让调节更细微和精确，选中锚点，轻点多次键盘上的方向键来移动即可，这个方法不局限于箭头形状，大家可以开启像素眼去发现更多的应用场景。
/UIsheji/lilunjiqiao/2083.html没有我们想要的分辨率如何解决
没有我们想要的分辨率如何解决
学习啦【笔记本】 编辑：林泽
　　遇到没有我们想要的分辨率这种情况，该怎么办，那么没有我们想要的分辨率如何解决的呢?下面是学习啦小编收集整理的没有我们想要的分辨率如何解决，希望对大家有帮助~~
　　没有我们想要的分辨率的解决办法
　　安装驱动人生，根据提示更新完所有的驱动，然后重启电脑;
　　2右击电脑桌面，选择NVIDIA控制面板打开，如果没有的就在电脑左下角开始菜单的程序里找;
　　3选择&更改分辨率& & &自定义&，弹出的对话框中选择左下角的&创建自定义分辨率&;
　　4在显示模式里修改我们想要的水平像素和垂直扫描线，比如没有分辨率，我们就把水平修改为1440、垂直修改为900;然后&计时&的标准选项选择GIF，点击测试;
　　5测试成功后若我们觉得修改的分辨率满意了，点击是然后保存即可;
　　6回到电脑右击桌面选择&屏幕分辨率&，就会发现我们刚修改的分辨率已经出现了!
没有我们想要的分辨率如何解决相关文章：
[没有我们想要的分辨率如何解决]相关的文章
【笔记本】图文推荐像素方块枪战破解版下载|像素方块枪战无限金币版 v1.3.2内购版_5577我机网
您的位置：
→ 像素方块枪战无限金币版 v1.3.2内购版
像素方块枪战游戏中玩家需要先完成自己的主线任务才能获得升级等到武器，最开始只有一把手枪，通过不断的战斗在敌人身上可以找到多种武器来进行更换。【特别说明】由于像素方块枪战破解版暂时未上，先为大家带来官网版游戏下载。【游戏特色】像素方块枪战中我们将在游戏中不断挑战敌人或者是和其他玩家进行对战，游戏的节奏感十分的强，你的方向感也是非常的强大哦。稍有不慎就会被敌人爆头，以至于游戏终止结束。喜欢像素射击类游戏的朋友，不容错过哦，快带上你的队伍加入战争中来吧！偏向休闲类的射击游戏。更多模式与挑战、武器的选择。精美的3D像素风格，丰富多变的游戏场景。方块与像素的射击游戏，玩法轻松简单。简约清新的游戏场景，给你愉悦的游戏体验。【游戏玩法】你的目标是为队伍争光！射杀你的敌对方，赢取胜利！每一关的地图都不一样，你需要找到好的岩体开始战斗。游戏支持多人对战，再有戏中还可以进行空中的军队和坦克。
无限金币手游
共有：10068款
内购破解类手游分享，如果亲们对于破解版的网游感兴趣的话，可以在本类里面进行下载，已经包含了目前好玩手游中绝大多数的破解噢~！
血族这这款游戏是于同名热门动漫《血族：圣魔虚像篇》交相呼应的一款卡牌游戏，深受大众喜爱！我机小编为了增加大家游戏乐趣，特意奉上此款内购安卓破解版供大家玩耍，希望大家喜欢欢迎体验！
《煎饼侠》是一款根据同名电影改编而来的动作跑酷游戏，游戏已破解内购，无限钻石金币等你来享！游戏加入了丰富的游戏关卡设计，颠覆了传统的跑酷题材，为你带来一场前所未有的跑酷体验！
一款真正由日本团队汉化运营的手游，游戏画面制作靓丽，玩法多样赶快前来下载召唤不同的武器精灵，化身为最强骑士与公主一起讨伐百条魔龙拯救世界吧，该版本为内购破解版，希望可以带给你更多的游戏乐趣！
大话西游之月光宝盒想必大家对该电影耳熟能详吧，如今电影唯一授权打造的优秀角色扮演类手机游戏震撼上架，你值得拥有！百分百还原电影原作，故事对话幽默搞笑且不失深度，画面细致靓丽，技能绚丽多彩，欢迎体验！
《轩辕剑格斗版内购破解版》轩辕剑系列的手游，采用全新的战斗机制，丰富的剧情加上华丽的特效，喜欢的朋友们千万不要错过了！
烈战三国是一款以三国为题材的3D卡牌游戏，此版本为内购破解版。游戏加入了众多Q版的三国名将等你来招募，组建你最强的军队，攻城略地，铸就你的三国霸业，书写属于你的传奇！赶快加入进来下载体验吧！
共有：4565款
无限金币类手游分享，网络游戏中有些游戏也被大神玩家破解，进而衍生出了一些版本，其中的无限金币类手游相信应该是大家比较感兴趣的说噢~！
它是腾讯最新上架的提款动作冒险类的3D跑酷游戏的破解版，该版本是最新版本，修改无限金币。大家可以放心的玩耍，希望我机小编带给这个版本可以让大家更加得心应手玩转这款手游，给大家带来无限的欢乐！
随着植物与僵尸之间的僵持不下，它们迎来了第三部《植物大战僵尸3》！此版本已为您破解无限金币、无限阳光、无敌，喜爱植物大战僵尸系列的小伙伴不要错过咯！让我们和植物一起携手抵抗僵尸的入侵！
为了增加各位横扫西游玩家们的乐趣，特意给大家带来横扫西游最新版本v2.00.065破解版本供大家玩耍，该版本修改金币钻石8888888和加入防封代码，所以玩家不用担心封号异常等危险，有需求的玩家赶快前来下载吧！
今天全新版本v1.00.40版正式来袭，新增许多超级贵族以及战机。新的版本更新意味这旧版本的淘汰，以前的破解版都不能再帮助大家刷分刷金币，为了让玩家你更好的享受游戏乐趣，小编特意第一时间奉上最新的v1.00.40无限
随着电视剧花千骨的火爆，《花千骨》手游也被越来越多的小伙伴所青睐！但是体力问题一直困扰着众多小伙伴，今天小编为大家带来的是无限体力版，赶快加入进来，麻麻再也不用担心体力不够用了！
崩坏学园2是一款萌妹子射击的手机网游，而该版本为修改版本，能够破解无限金币使用，通过破解操作让你在游戏中体验更多的乐趣，喜欢该游戏的玩家下载使用吧！
相关合集推荐
本类下载排行后使用快捷导航没有帐号？
只需一步，快速开始
查看: 6024|回复: 32
li标签中的元素如果float则会引起多余的像素，如何解决？
UID244377在线时间 小时积分3698帖子离线17340 天注册时间
- -! 不是一次碰到这样的问题了。
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
* { margin:0; padding:0; list-style:}
ul { font:12px/18 width:200}
li:after{ content:&.&; display: height:0; clear: visibility:}
li { display:inline-}
li { display: background:#f60;}
.text { float:}
.date { float:}
&span class=&text&&文字文字文字&/span&
&span class=&date&&&/span&
&span class=&text&&文字文字文字&/span&
&span class=&date&&&/span&
&span class=&text&&文字文字文字&/span&
&span class=&date&&&/span&
&span class=&text&&文字文字文字&/span&
&span class=&date&&&/span&
&提示：您可以先修改部分代码再运行
UID501063在线时间 小时积分805帖子离线17340 天注册时间
高级会员, 积分 805, 距离下一级还需 195 积分
给li加&&float:
为什么我不知道，但每次我都这么解决的~
UID244377在线时间 小时积分3698帖子离线17340 天注册时间
- -! 我也是...还有width:100%。
就是搞不清啥原因。
UID275106在线时间 小时积分1424帖子离线17340 天注册时间
银牌会员, 积分 1424, 距离下一级还需 1576 积分
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
* { margin:0; padding:0; list-style:}
ul { font:12px/18 width:200}
li:after{ content:&.&; display: height:0; clear: visibility:}
li { display: background:#f60;}
.text { float:}
.date { float:}
&span class=&text&&文字文字文字&/span&
&span class=&date&&&/span&
&span class=&text&&文字文字文字&/span&
&span class=&date&&&/span&
&span class=&text&&文字文字文字&/span&
&span class=&date&&&/span&
&span class=&text&&文字文字文字&/span&
&span class=&date&&&/span&
&提示：您可以先修改部分代码再运行
li { display:inline-} 去掉...
UID244377在线时间 小时积分3698帖子离线17340 天注册时间
谢谢楼上大哥。
感觉我陷入一个“为什么”的深渊了...
天啦，li { display:inline-} li { display:}，我一直以为只会取display:这个值，前面写display啥都没关系...
UID501063在线时间 小时积分805帖子离线17340 天注册时间
高级会员, 积分 805, 距离下一级还需 195 积分
display:inline-
这个东西为什么我都几乎没用过呢。-。-
UID244377在线时间 小时积分3698帖子离线17340 天注册时间
这个属性很重要，你往下面的帖子翻，有个加分的帖陈述了它的应用。
另外4楼的这个方法不行，display:inline-这里是用于清除ie下的浮动的，我现在在里面是一个左浮动一个右浮动，如果只有左浮动就会出现问题了。
目前的方法还只有2楼说的li {float:width:100%;}。
[[i] 本帖最后由 14px 于
11:11 编辑 ]
UID501063在线时间 小时积分805帖子离线17340 天注册时间
高级会员, 积分 805, 距离下一级还需 195 积分
看了那个帖子，原来是在内容不确定高度的情况下浮动的问题。。
我们公司网站的要求太高，所有的页面都要固定高度并对齐，不可以自适应高度，不管是什么地方。所以还真用不上这个。。。我也就没遇到过那种问题了。-。-汗~
UID496283在线时间 小时积分3441帖子离线17340 天注册时间
原帖由 [i]14px 于
11:10 发表
这个属性很重要，你往下面的帖子翻，有个加分的帖陈述了它的应用。
另外4楼的这个方法不行，display:inline-这里是用于清除ie下的浮动的，我现在在里面是一个左浮动一个右浮动，如果只有左浮动就会出现问题了 ...
我发现问题还是在于，如果&&li 不浮动并且触发了 hasLayout，那么就会有空隙。所以用触发 hasLayout 来闭合浮动的方法在这里就会导致空隙。
感觉我陷入一个“为什么”的深渊了...
天啦，li { display:inline-} li { display:}，我一直以为只会取display:这个值，前面写display啥都没关系...
写这两句，li 的 display 值最终确实只会取 block，但是前面的 { display:inline-} 的作用就是触发 hasLayout，这个触发效果不会因为 display 值被覆盖为 block 而取消。这其实也就是这两句话的意义。
[[i] 本帖最后由 birdstudio 于
14:00 编辑 ]
UID275106在线时间 小时积分1424帖子离线17340 天注册时间
银牌会员, 积分 1424, 距离下一级还需 1576 积分
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
* { margin:0; padding:0; list-style:}
ul { font:12px/18 width:200}
li:after{ content:&.&; display: height:0; clear: visibility:}
li {display:zoom:1;background:#f60;}
.text { float:}
.date { float:}
&span class=&text&&文字文字文字&/span&
&span class=&date&&&/span&
&span class=&text&&文字文字文字&/span&
&span class=&date&&&/span&
&span class=&text&&文字文字文字&/span&
&span class=&date&&&/span&
&span class=&text&&文字文字文字&/span&
&span class=&date&&&/span&
&提示：您可以先修改部分代码再运行
IE下块元素如何实现 display:inline-block 的效果
div {display:inline-...}
div {display:}
div {display: zoom:1;...}
可以添加width属性来设置宽度...
我用第二种方法就没有出现你所说的问题...也能触发layout
[[i] 本帖最后由 musictea 于
15:05 编辑 ]
UID244377在线时间 小时积分3698帖子离线17340 天注册时间
回复 9# birdstudio
恩恩明白了，谢谢大哥~``
UID244377在线时间 小时积分3698帖子离线17340 天注册时间
回复 10# musictea
对哦，还能这样触发，见识了，谢谢~
UID421687在线时间 小时积分2921帖子离线17340 天注册时间
银牌会员, 积分 2921, 距离下一级还需 79 积分
施主,这样写看可以不 ? &&...
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
* { margin:0; padding:0; list-style:}
ul { font:12px/18 width:200}
li:after{ content:&.&; display: height:0; clear: visibility:}
li { display:inline-}
li { display: background:#f60;}
.date { float:}
&span class=&date&&&/span&
&span class=&text&&文字文字文字&/span&
&span class=&date&&&/span&
&span class=&text&&文字文字文字&/span&
&span class=&date&&&/span&
&span class=&text&&文字文字文字&/span&
&span class=&date&&&/span&
&span class=&text&&文字文字文字&/span&
&提示：您可以先修改部分代码再运行
UID496283在线时间 小时积分3441帖子离线17340 天注册时间
原帖由 [i]HeTingYi 于
00:43 发表
施主,这样写看可以不 ?&&
大师果然高啊~~
UID501496在线时间 小时积分25帖子离线17340 天注册时间
新手上路, 积分 25, 距离下一级还需 25 积分
都是高手,看了真是长了见识了.谢谢各位.
UID421687在线时间 小时积分2921帖子离线17340 天注册时间
银牌会员, 积分 2921, 距离下一级还需 79 积分
原帖由 [i]birdstudio 于
11:19 发表
大师果然高啊~~
低调 低调 .. 互相学习而已 ....
UID283590在线时间 小时积分2414帖子离线17340 天注册时间
银牌会员, 积分 2414, 距离下一级还需 586 积分
这个问题也经常困扰着我，存在于IE上面，虽然不能完全深入理解，但通过下面的例子我们应该能明白一些什么。在楼主的例子上
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
* { margin:0; padding:0; list-style:}
ul { font:12px/18 width:200}
li:after{ content:&.&; display: height:0; clear: visibility:}
li { display:inline-}
li { display: background:#f60;}
.text { float:}
.date { float:}
&span class=&text&&文字文字文字&/span&
&span class=&date&&&/span&
&br style=&clear:& /&
&span class=&text&&文字文字文字&/span&
&span class=&date&&&/span&
&span class=&text&&文字文字文字&/span&
&span class=&date&&&/span&
&span class=&text&&文字文字文字&/span&
&span class=&date&&&/span&
&提示：您可以先修改部分代码再运行
这样对li使用&br style=&clear:both&/& 清除浮动可以解决这个问题，可使用overflow:hidden等方法却不能解决这个问题。
当然给li增加float属性为left或者right也能解决这个问题。
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
* { margin:0; padding:0; list-style:}
ul { font:12px/18 width:200}
li { display: background:#f60;float:left}
.text { float:}
.date { float:}
&span class=&text&&文字文字文字&/span&
&span class=&date&&&/span&
&br style=&clear:& /&
&span class=&text&&文字文字文字&/span&
&span class=&date&&&/span&
&span class=&text&&文字文字文字&/span&
&span class=&date&&&/span&
&span class=&text&&文字文字文字&/span&
&span class=&date&&&/span&
&提示：您可以先修改部分代码再运行
另外本人测试过程中，发现这个间隙的大小与字体的大小似乎也有关系。通常我们网页设置的默认字体一般为12而这个
间隙大小为li元素字体的尺寸(12px)的四分之一。我们将字体设置大一点,让我们能足够看清这个间隙的变化.
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
* { margin:0; padding:0; list-style:}
ul { font:12px/18 width:200}
li { display: background:#f60;height:150font-size:50}
.text { float:}
.date { float:}
&span class=&text&&文字文字文字&/span&
&span class=&date&&&/span&
&br style=&clear:& /&
&span class=&text&&文字文字文字&/span&
&span class=&date&&&/span&
&span class=&text&&文字文字文字&/span&
&span class=&date&&&/span&
&span class=&text&&文字文字文字&/span&
&span class=&date&&&/span&
&提示：您可以先修改部分代码再运行
这个间隙是否变大了很多啊（用IE6查看）
既然如此我们采用如下的解决方案。
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
* { margin:0; padding:0; list-style:}
ul { font:12px/18 width:200}
li { display: background:#f60;height:30font-size:0}
.text { float:font-size:12}
.date { float:font-size:12}
&span class=&text&&文字文字文字&/span&
&span class=&date&&&/span&
&br style=&clear:& /&
&span class=&text&&文字文字文字&/span&
&span class=&date&&&/span&
&span class=&text&&文字文字文字&/span&
&span class=&date&&&/span&
&span class=&text&&文字文字文字&/span&
&span class=&date&&&/span&
&提示：您可以先修改部分代码再运行
主要思路如下代码
li { display: background:#f60;height:30font-size:0}
.text { float:font-size:12}
.date { float:font-size:12}复制代码
先将li的字体大小设置为0,间隙就是0的四分之一还是为0.然后将我们要显示的文字大小设置为对应的大小就OK了.
写的仓促，有不对之处敬请多多指教！
[[i] 本帖最后由 lijun198296 于
08:40 编辑 ]
UID244377在线时间 小时积分3698帖子离线17340 天注册时间
真是高人辈出的年代，和尚好强大。
楼上分析得详尽易懂~！~把这个bug的规律都挖掘出来了，实在佩服~！~
再次感谢各位的解答，让我学到了不少东西~也让我见识到了现代版八仙过海~````
UID283590在线时间 小时积分2414帖子离线17340 天注册时间
银牌会员, 积分 2414, 距离下一级还需 586 积分
回复 13# HeTingYi
大师这招确实不错,一招太极让BUG消失于无形 .
看似无招,却胜似千万招.
UID205681在线时间 小时积分387帖子离线17340 天注册时间
中级会员, 积分 387, 距离下一级还需 113 积分
回复 17# lijun198296
原来如此啊，学习了
UID496283在线时间 小时积分3441帖子离线17340 天注册时间
回复 17# lijun198296
很细致的分析，谢谢分享！
UID222349在线时间 小时积分166帖子离线17340 天注册时间
初级会员, 积分 166, 距离下一级还需 34 积分
LI：vertical-align:bottom
LI:float:clear:
即可...第一种会影响其内a连接有中英文混连的时候的下划线对齐
UID421822在线时间 小时积分128帖子离线17340 天注册时间
初级会员, 积分 128, 距离下一级还需 72 积分
大师云集的帖子
UID504788在线时间 小时积分309帖子离线17340 天注册时间
中级会员, 积分 309, 距离下一级还需 191 积分
不错不错，学习了。
UID446134在线时间 小时积分2149帖子离线17340 天注册时间
银牌会员, 积分 2149, 距离下一级还需 851 积分
这个帖怎么以前没看到，还好现在看到了，收益颇多啊，收藏之。
UID264975在线时间 小时积分7319帖子离线17340 天注册时间
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
* { margin:0; padding:0; list-style:}
ul { font:12px/18 width:200}
li:after{ content:&.&; display: height:0; clear: visibility:}
li { display: background:#f60;line-height:120%;}
.text { float:}
.date { float:}
&span class=&text&&文字文字文字&/span&
&span class=&date&&&/span&
&span class=&text&&文字文字文字&/span&
&span class=&date&&&/span&
&span class=&text&&文字文字文字&/span&
&span class=&date&&&/span&
&span class=&text&&文字文字文字&/span&
&span class=&date&&&/span&
&提示：您可以先修改部分代码再运行
貌似这个解决方法没人提,这样子有什么问题么?
li里加line-height
UID403890在线时间 小时积分3帖子离线17340 天注册时间
新手上路, 积分 3, 距离下一级还需 47 积分
个人觉得风魂说的实用！大师的方式适用于li内是2个浮动元素的情况！如果是3个或者4个的话！这样可能不不太好使了！不过感谢大家了，因为今天我也遇到这个bug了！晕！！向高手学习！
UID503304在线时间 小时积分450帖子离线17340 天注册时间
中级会员, 积分 450, 距离下一级还需 50 积分
UID467782在线时间 小时积分493帖子离线17340 天注册时间
中级会员, 积分 493, 距离下一级还需 7 积分
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
* { margin:0; padding:0; list-style:}
ul { font:12px/18 width:200}
li:after{ content:&.&; display: height:0; clear: visibility:}
li { display:inline- overflow: zoom:1;}
li { display: background:#f60;}
.text { float:}
.date { float:}
&span class=&text&&文字文字文字&/span&
&span class=&date&&&/span&
&span class=&text&&文字文字文字&/span&
&span class=&date&&&/span&
&span class=&text&&文字文字文字&/span&
&span class=&date&&&/span&
&span class=&text&&文字文字文字&/span&
&span class=&date&&&/span&
&提示：您可以先修改部分代码再运行
不过觉得13楼的方法最好。
UID416583在线时间 小时积分796帖子离线17340 天注册时间
高级会员, 积分 796, 距离下一级还需 204 积分
原帖由 [i]beyondmc 于
14:13 发表
个人觉得风魂说的实用！大师的方式适用于li内是2个浮动元素的情况！如果是3个或者4个的话！这样可能不不太好使了！不过感谢大家了，因为今天我也遇到这个bug了！晕！！向高手学习！
如果是3个或者4个就用TABLE了吧。
千万别钻牛角尖。
Powered by}