怎样解决div css布局页面浏览器的兼容问题

发布网友 发布时间：2022-04-20 17:14

我来回答

共7个回答

懂视网 时间：2022-04-20 21:36

一开始我猜测使用它可以实现，采用如下 CSS ：

.justify{
 text-align: justify;
}

.justify i{
 width:24px;
 line-height:24px;
 display:inline-block;
 text-align:center;
 border-radius:50%;
}

结果如下：

Demo戳我

没有得到意料之中的结果，并没有实现所谓的两端对齐，查找原因，在 W3C 找到这样一段解释:

最后一个水平对齐属性是 justify，它会带来自己的一些问题。CSS 中没有说明如何处理连字符，因为不同的语言有不同的连字符规则。规范没有尝试去调和这样一些很可能不完备的规则，而是干脆不提这个问题。

额，我看完上面一大段解释还是没明白上面意思，再继续查证，才找到原因：

虽然 text-align:justify 属性是全兼容的，但是要使用它实现两端对齐，需要注意在模块之间添加[空格/换行符/制表符]才能起作用。

也就是说每一个 1 间隙，至少需要有一个空格或者换行或者制表符才行。

好的，我们尝试一下更新一下 HTML 结构，采用同样的 CSS：

 
 1

 2

 3

 4

 5

 

尝试给每一块中间添加一个换行符，结果如下：

Demo戳我

啊哦，还是不行啊。

再寻找原因，原来是出在最后一个元素上面，然后我找到了 text-align-last 这个属性，text-align-last属性规定如何对齐文本的最后一行，并且 text-align-last 属性只有在 text-align 属性设置为 justify 时才起作用。

尝试给容器添加 text-align-last:justify：

.justify{
 text-align: justify;
 text-align-last: justify; // 新增这一行
}

.justify i{
 width:24px;
 line-height:24px;
 display:inline-block;
 text-align:center;
 border-radius:50%;
}

发现终于可以了，实现了多列均匀布局：

Demo戳我

结束了？没有，查看一下 text-align-last 的兼容性：

但是一看兼容性，惨不忍睹，只有 IE8+ 和 最新的 chrome 支持 text-align-last 属性，也就是说，如果你不是在使用 IE8+ 或者 最新版的 chrome 观看本文，上面 Demo 里的打开的 codePen 例子还是没有均匀分布。

上面说了要使用 text-align:justify 实现多列布局，要配合 text-align-last ，但是它的兼容性又不好，真的没办法了么，其实还是有的，使用伪元素配合，不需要 text-align-last 属性。

我们给 class="justify" 的 div 添加一个伪元素：

.justify{
 text-align: justify;
}

.justify i{
 width:24px;
 line-height:24px;
 display:inline-block;
 text-align:center;
 border-radius:50%;
}

.justify:after {
 content: "";
 display: inline-block;
 position: relative;
 width: 100%;
}

去掉了 text-align-last: justify 了，增加一个伪元素，效果如下：

Demo戳我，任意列数均匀布局

通过给伪元素 :after 设置 inline-block 设置宽度 100% ，配合容器的 text-align: justify 就可以轻松实现多列均匀布局了。再多配合几句 hack 代码，可以实现兼容到 IE6+ ，最重要的是代码不长，很好理解。

最终实现题目初始所示：

Demo戳我，任意列数均匀布局

此方法初见于这篇文章，得到原博主同意写入了本系列，非常值得一看：

别想多了，只不过是两端对齐而已

所有题目汇总在我的 Github ，发到博客希望得到更多的交流。

到此本文结束，如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

热心网友 时间：2022-04-20 18:44

哎，是有点麻烦，根据我的经验。你应该这样做，可以省点事。首先不要考虑什么兼容性。你可以先用现代标准浏览器测试你的网页，比如IE8或Firefox，什么ie6、ie7可以先不用考虑。在IE8或Firefox中测试正常后，在用ie6、ie7测试，现在就开始写兼容代码。这样做，让你思路比较清晰。但是你一定要了解你的css代码的作用。不然调试的时候，你会越弄越乱的。
做兼容代码，你需要注意的是，各种浏览器元素盒模型的不同解析（影响元素的宽和高），浮动的清除（影响布局）等。特别注意ie6它的与众不同。

热心网友 时间：2022-04-20 20:02

你刚学DIV+CSS吧 要让页面居中 在每个父层DIV定义了你需要的宽度的情况下加上margin:0 auto;这样才能在基本上你能接触的浏览器上居中，建议你去www.52CSS.COM多学习，我也在那里学习中。呵呵！

热心网友 时间：2022-04-20 21:36

以width为例吧：
width:100px;这样所有浏览器都能识别，但是解释结果不一样；
width:100px!important;或*width:100px!important;或*width:100px;这样写IE7能认识，我一直用第一种方式;
_width:100px;这种写法只有IE6认识;
在使用float控制不换行版式事注意加上overflow:hidden;否则，在有些浏览器中是得不到想要的结果的！

热心网友 时间：2022-04-20 23:28

你只能两个浏览器来回实验着看，还有记得overflow:hidden,有时候火狐浏览器，没有这个,父模块和子模块之间就控制不住。

热心网友 时间：2022-04-21 01:36

这个你可以参考网上有许多的兼容问题
http://blog.sina.com.cn/s/blog_5fc02bdd0100dkmb.html

热心网友 时间：2022-04-21 04:00

我收藏了一些这方面的知识，希望对你有帮助
http://hi.baidu.com/liushuhuan11/blog/item/00aaa63ada2db0cbd4622569.html