各位，当你点击这个博文的时候相信你是对CSS+DIV有研究的人。应该有绝大部分的人还在使用DW软件，因为DW的提示功能是在是太强大了。当然，还是有人选择一些纯手写的软件，因为那样可以记得每一个样式的拼写。回到DW里吧，它才是本文的主角。
以前我写CSS+DIV的时候从来不看设计页面里面的效果，因为以浏览器为标准可以减少很多不必要的兼容处理。但是，我工作了以后，我发现设计视图还是非常常用的，当然不是对于我们来说，是对于一些程序员来说，特别是用DW来开发PHP的程序员，我不知道这部分的人多不多，反正我们公司就有好几位。在设计视图里面找内容所在的HTML位置是非常方便的。虽然现在DW CS4以上版本的实时视图这个强大的功能，这个功能是将opera浏览器和DW合成在一起，这样既可以看到比较符合标准的浏览器下的效果，也可以轻松的找到内容对应的HTML。尽管，adobe做了这么大的努力，可惜有些程序员就是不领情，还是用micromedia时代的DW 8。这不能全怪他们奥特了，能够符合自己开发习惯的环境是很重要的。DW CS3以上版本确实在功能的展示和使用上面做了很多的改进，同时也让一些很忙碌的程序员不愿意去习惯一个新的开发环境。
那么，既然是下线的开发人员要求在设计视图要70%保证布局不错乱的条件，我们也只能满足他们，毕竟小公司效率才是王道。
说了这么多就是想让大家知道，尽管设计视图有多么的不符合标准，与标准浏览器的效果有多么的恶心，我们还是有必要要保证在设计视图里的效果能够妥妥的。
下面进入主题，很抱歉这么晚才进入主题。首先让大家看看设计视图里错乱的效果，顺便也讲解一下吧，强调：如果有说错的地方，请各位吐吐槽，说说我，指点指点。谢谢。哈
左边的商品展示应该是横向排列的，结果竖立了。这是为什么呢？其实是因为在ul里没有设置宽度有关。设计视图里没有定义大小的容器，他无法确定显示的大小，所以我们就要定义个宽度就可以了，不知道DW里有没有haslayout。道理是一样的。在浏览器里，因为有li，所以会把ul给撑开。所以可以不设置，不过我们最好还是设置下宽度好，因为像这种设计一般宽度都是固定的，如果宽度不固定怎么办？设置个高度看看，还是不行就只好放弃了。DW的设计视图能兼容就兼容不行就放弃吧。别太钻研做到和浏览器一样的效果。
看，这个嘛都挤在一起来，定义了float没有定义宽度和高度，同样定义宽度可以解决问题。要自适应效果的就放弃兼容DW吧。（其实我是没有找到跟好的方法，哈哈）
其实这个是一个选项卡的头部，因为多边形要用相对位置来实现，所以呢。就他们三个私奔了。其实很费解，相对定位并没有脱离文本流啊。为啥会单独飞出来呢？为啥要私奔呢？这个问题我还没研究什么成果来，毕竟相对定位用得不多，以后尽量避免用定位就可以了。顺便说说绝对定位，绝对定位可能连人影都找不到，所以，想兼容DW的朋友对待定位属性要三思而后行。
这个挺整齐的，为啥要发出来呢？其实啊，虽然布局没有乱。但是当鼠标选项中最新评价的内容就选了整块，里面的内容无法选中，这块内容少一点还好，但内容多了。程序员就要费半天找内容了。那是什么属性导致这样的呢？我当初非常费解，于是一个个主要影响显示效果的属性都测试了一下，比如float overflow width 等等。一开始认为是子元素浮动了，父元素没有浮动导致的，后来测试发现不是。把宽度和高度都测试下也不行。最后我发现那个不起眼还是很有个性的属性 overflow。没错！真相很简单，凶手就是他！（柯南出场）
因为里面有内容溢出了，所以我在父元素上定义了overflow:hidden属性隐藏掉了。这就导致选取整块的原因。好吧，既然不能一了百了，那就只好对里面的孩子们进行overflow了。问题就可以解决。
我不是高手，我自认为是个菜鸟，以上就是我在除夕夜无聊说研究出来的结果，刚开始想在网上找资料看看的，发现没有相关的内容，也不找不到DW 设计视图的解析原理，所以只好自己写来造福一些有需求的同胞们。我相信以后也会有更多的研究成果出来，所以先写个（一）吧。哈。如有错误的地方请你留步，骂骂我吧。谢谢。呵呵
在这里也祝大家新年快乐。在兔年在工作或者学习上能够 兔出猛进！
阅读(3315) | 评论(0) | 转发(0) |
