在调css的时候，发现居然有firefox实现效果完整而chrome出现问题的情况；

详细情况：segmentfault1 segmentfault2

全文表达：

<html><head>

<meta charset="UTF-8">

<title>Execl</title>

<style type="text/css">

  ul{

  }

  .ul_row{

   display:inline-block;

   min-width:800px;

   margin:0 auto;

  }

  #table_div{

    width:100%;

    text-align:center;

  }

  .title{

   display:inline-block;

   min-width:800px;

    margin:0 auto;

  }

  li{

   list-style-type: none;

   float:left;

    height:30px;

    text-align:center;

    margin-left:1px;

    margin-bottom:1px;

    padding:0;

  }

</style>

</head>

<body>

<div id="table_div">

<ul class="title">

    <li id="12301" style="width: 200px; background-color: rgb(240, 128, 128);"><span>name</span></li>

    <li id="12302" style="width: 200px; background-color: rgb(240, 128, 128);"><span>age</span></li>

    <li id="12303" style="width: 300px; background-color: rgb(240, 128, 128);"><span>sex</span></li>

</ul>

<ul class="ul_row">

    <li id="12311" style="width: 200px; background-color: rgb(238, 230, 133);"><span>wow</span></li>

    <li id="12312" style="width: 200px; background-color: rgb(240, 248, 255);"><span>24</span></li>

    <li id="12313" style="width: 300px; background-color: rgb(238, 233, 191);"><span>male</span></li>

</ul>

<ul class="ul_row">

    <li id="12311" style="width: 200px; background-color: rgb(238, 230, 133);"><span>wow</span></li>

    <li id="12312" style="width: 200px; background-color: rgb(240, 248, 255);"><span>24</span></li>

    <li id="12313" style="width: 300px; background-color: rgb(238, 233, 191);"><span>male</span></li>

</ul>

</div>

</body>

</html>

　　缩进不完全的情况下，chrome下的结果如下：但是通过拉伸缩小网页宽度又可以达到正常效果。

正常效果如下：

在给的链接网友给出的分析是，text-align，居然被div下的不正常缩进导致问题发生，而当缩进规范后，chrome展现就好了。

由此，莫非chrome开始严格化代码的排版规范了？版本是34.0.

不过这也不是坏事，只是挺难想到，自己不够细心啊！

当网友提点之后，突然有想到之前看的关于前端经验总结的一个坑，关于默认的textNode问题。不过后面，也开始有人解答了，原来跟text-lign没关系。

所以呢，inline-block用起来还是挺麻烦的，但是如果不做text-align和inline-block，怎么让浮动的ul置中呢？

其实，把老父亲div设置定宽，再加上margin:0 auto;也不失为一个办法，只是总觉得width:100%是为了让表格大小更加灵活，但也许定宽也不一定就死板

div样式text-align在子元素缩进不规范的情况下，chrome出现的问题（貌似结果是inline-block导致的）的更多相关文章

  1. 编写高质量代码改善C#程序的157个建议——建议16：元素数量可变的情况下不应使用数组

    建议16:元素数量可变的情况下不应使用数组 在C#中,数组一旦被创建,长度就不能改变.如果我们需要一个动态且可变长度的集合,就应该使用ArrayList或List<T>来创建. 而数组本身 ...

  2. div元素宽度不定的情况下如何居中显示

    最近由于工作的原因碰到一个问题,就是在一个弹窗宽度不定的情况下还能是该弹窗居中显示,思考许久未找到合适办法,于是在网上找到一些办法在此总结记录下来方便以后的学习. 方法一:兼容IE67 <div ...

  3. sql 在not in 子查询有null值情况下经常出现的陷阱

    如果下:TempSalesPriceFixedValues表和SalesPriceFixedValues表,要求查询出在TempSalesPriceFixedValues表中且不在SalesPrice ...

  4. 父元素相对定位后，子元素在ie下被覆盖的问题！

    <div id="append_parent" style="position: relative;"> <div id="zoom ...

  5. 父元素高度设置为min-height，子元素高度设置为100%，但实际上子元素高度你知道是多少吗？

    前言 给父元素一个min-height,子元素设置height:100%. 代码 <!DOCTYPE html> <html> <head> <title&g ...

  6. CSS 实现：父元素包含子元素，子元素垂直居中布局

    ☊[实现要求]:父元素包含子元素,子元素垂直居中布局 <div class="demo5"> <div class="child">A& ...

  7. css 文字和子元素水平垂直居中

    关于水平垂直居中,这是一个很简单的问题,但是很多时候,往往简单的东西,反而做不出来.这就是基础不扎实的缘故吧,我参照一些资料,总结了水平垂直居中的几种方法如下: 1 .文字水平垂直居中 这个比较简单, ...

  8. CSS子元素在父元素中水平垂直居中的几种方法

    1. 水平居中(margin: auto;)子父元素宽度固定,子元素上设置 margin: auto; 子元素不能设置浮动,否则居中失效. #div1{ width: 300px; height: 3 ...

  9. jQuery编程基础精华02（属性、表单过滤器，元素的each，表单选择器，子元素过滤器(*)，追加方法，节点，样式操作）

    属性.表单过滤器 属性过滤选择器: $("div[id]")选取有id属性的<div> $("div[title=test]")选取title属性为 ...

随机推荐

  1. Ubuntu 安装php+mysql 环境

    新系统安装完毕后,首先运行apt-get update 更新apt库. 然后安装ssh,输入apt-get install openssh-server,安装ssh是为了可以远程操作,不然坐在机房实在 ...

  2. 关于Vue vuex vux 文档

    01. vue 链接 http://vuejs.org.cn/guide/ 02. vuex  ----->>状态管理模块儿<<------- https://vuex.vue ...

  3. 从源代码剖析Mahout推荐引擎

    转载自:http://blog.fens.me/mahout-recommend-engine/ Hadoop家族系列文章,主要介绍Hadoop家族产品,常用的项目包括Hadoop, Hive, Pi ...

  4. sqlserver Between And的问题

    Id Name RegisterDate 1 澎澎 2007/1/5 00:00:00 2 丁丁 2007/1/6 04:37:00 3 亞亞 2007/1/7 00:00:00 数据库的数据如上.若 ...

  5. Web GIS离线解决方案

    1.背景 在离线环境下(局域网中)的GIS系统中如何使用地图?这里的地图主要指的是地图底图,有了底图切片数据,我们就可以看到地图,在上面加上自己的业务数据图层,进行相关操作. 要在离线环境下看到GIS ...

  6. struts 2 时间控件

    在使用struts2框架时,为我们提供了时间选择器控件:datetimepicker.但是在使用过程中会出现一些问题,主要就是struts2版本更新时做了一些修改.在struts2.0时,使用< ...

  7. OpneCv2.x 模块结构

    转自:http://blog.csdn.net/huang9012/article/details/21811271 之前啃了不少OpenCV的官方文档,发现如果了解了一些OpenCV整体的模块架构后 ...

  8. python 学习第二天

    由于换了博客,第一篇没有在博客园写,写在了开源中国上,链接地址为http://my.oschina.net/u/254063/blog/719289,大家有兴趣可以看看 一, python 数据类型 ...

  9. 关于SVN出现 svn working copy locked的原因及解决方法

    今天使用SVN时电脑卡住了,于是结束进程中断了SVN的操作,于是出现了如题问题, 产生这种情况大多是因为上次svn更新命令执行失败且被自动锁定了. 如果cleanup没有效果的话只好手动删除锁定文件. ...

  10. JavaScript高级程序设计-(2)基础概念

    for-in 语句 for-in 语句是一种迭代语句,用来枚举对象属性,语法:for (property in expression) statement实例:for(var propName in ...