&nbs p;
一、前言
搜狐有个白社会，今年六七月份露出水面的。其首页css我是从头到尾看了一遍，学了些东西，也用自己的想法优化了些东西。其中之一就是一个显示你或者是好友说了些什么的popup式的对话框，有些形似iphone里面的可爱的短信对话框。看下面的小小截图：
这个对话框效果是不错的，能支持高度上限500像素的文字内容，宽度自动适用于内部的文字内容。
但是参观其 HTML 代码是背景图片后，发现要实现这样的效果，这代码，至少是这图片肯定是优化不够的。而本文将对比其 原来 的方法，提供更加大小优化的图片和对应的没有兼容性问题的css代码，看如何将css发挥到机制实现 图片背景 的优化。
文章 主体 分三部分，显示展示如何使用 搜狐 白社会原始版本的图片实现；然后前近一步，使用我处理后图片实现同样的效果；最后将更进一步，使用我再次处理的图片实现更具有扩展性的效果。
二、文章主体
图片处理1、使用原搜狐白社会 对话 框背景图片
使用的图片：图片大小为2000像素*1000像素，7.82K，直接显示在文章中不太适合，您可以点击这里查看
2、我对搜狐白社会对话框背景图片处理后的图片
使用的图片：图片大小为1000像素*500像素，3.8K，直接显示在文章里不太合适，您可以点击这里查看
3、我对搜狐白社会对话框背景图片进一步处理后
使用的图片：
现在图片大小为：16像素*25像素，大小281b。 效果表现
以上三种图片实现的最终效果在各个浏览器下的表现如下：
IE6下的三种处理的显示结果
IE7下的三种处理的显示结果
Firefox下的三种处理的显示结果
ch rom e下的三种处理的显示结果
Safari下的三种处理的显示结果
简要说明1、使用搜狐的默认图片
这个图片做得可真是大，2000*1000，将四个角分别定位在图片的四个角落上，然后通过四层标签的嵌套就可以实现自适应内部内容的popup对话框效果。这种方式可以说省掉不少写css的工程师的脑细胞，虽说css实现难度是低了，可以图片大小却7.82K，我是 知道 为什么白社会打开要慢些了。一个popup 背景图片大小 7.82K实在是不能容忍的，而且最终实现的效果支持的高度是有限的，最高500像素，超过500像素，布局就会毁掉。看下面的图：
css 源 代码见demo实例页面：狠狠地点击这里
2、我处理后的图片
实现与上面一模一样的效果，但是背景图片却是不一样的，我这里的图片高 宽 1000*500， 面积 为原来图片的1/4；大小为原来的一 半 还要少。但是css方面要花点脑细胞，多层标签间有错位显示以实现良好的表现效果。但是对位优秀的前端，所做的就是尽可能地使用技 术 优化整个页面。
css源代码见demo实例页面：狠狠地点击这里
3、我进一步处理的图片
这次处理成281b大小的图片，是搜狐白社会的背景图片大小的1/30，已经相差一个数量级别了。更 重要 的是这里不仅仅是实现了原有的表现，而且已经没有高度和宽度的限制了。唯一的不足就是HT ML 部分有些复杂，标签较多。但是相比较 GOOGLE 一些产品的HTML标签个数还算精简的。事物都是有两面性的，这里的优点就是图片极小，内部内容不限高宽，就是说无论多长多高的文字都不会有布局问题。不足就是标签数有8个，加上最外标签，共9层标签。这个最外层标签作用是使宽度自适应与内部文字内容，使用：dis play :inline-block; *display:inline; zoom:1;可以达到类似效果。
此处css代码相对复杂些，里面有些东西还算是比较高级的，其中值得注意的地方之一就是用line-h ei ght撑开高度，而不是直接使用height， 原因 在于height会使 div 宽度100%显示，撑开外部div。原因或许与height使其haslayout属性有关的。最近关于haslayout的文章也算不少，您如果不是很 了解 建议去看看，对学习与使用css还是很有帮助的。
还有，这里有 一点 我可以确定，这一定不是最佳的方法。您有兴趣可以试着用用其他的方法，获取可以找到更加精妙的实现方法的。
css源代码见demo实例页面：狠狠地点击这里
各类方法的取舍还是看您自己了。
源文件下载.zip 15.2K
三、最后小结
要实现上面白社会这样的对话框效果肯定是由更加简约，兼容性扩展性依旧很强的方法的，技术无止境，我技术有限，一定存在更加上乘的方法的，我想只要 不断 思考， 探索 ，钻研总会找到方法的，这个人可能就是您，您不妨抽个时间研究研究，试验试验。欢迎交流！
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-搜狐白社会似iphone短信对话框效果的优化 全部内容，希望文章能够帮你解决 html5教程-搜狐白社会似iphone短信对话框效果的优化 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-搜狐白社会似iphone短信对话框效果的优化的详细内容...