在调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. C 语言Struct 实现运行类型识别 RTTI

    通过RTTI,能够通过基类的指针或引用来检索其所指对象的实际类型.c++通过下面两个操作符提供RTTI. (1)typeid:返回指针或引用所指对象的实际类型.    (2)dynamic_cast: ...

  2. ACM/ICPC 之 有流量上下界的网络流-Dinic(可做模板)(POJ2396)

    //有流量上下界的网络流 //Time:47Ms Memory:1788K #include<iostream> #include<cstring> #include<c ...

  3. 排序之----插入排序（C#实现）

    算法步骤:(从小到大) 1:将第一个元素与第二个元素比较大小,如果第一个元素小于等于第二个元素,不做处理,继续比较第二个元素和第三个元素. 如果第三个元素小于第二个元素,保存要移动的元素(第三个元素) ...

  4. ORACLE发送带附件邮件的二三事之一

    在oracle使用过程中,我们可以通过pl/sql生成数据文件,也可以通过spool on spool off生成,但某些环境下,我们需要通过存储过程处理数据,数据处理完,需要自动生成数据文件,手工导 ...

  5. linux常用命令备忘

    scp使用非默认端口 scp -P port username@.....IP:/dir 要拷贝到的地方

  6. 移动wap隐藏的坑

    非原创,只做转载 ------------------------------------------------------------------------------------------- ...

  7. iOS 版本号大小比较

    NSString *num1 = @"5.2.0";    NSString *num2 = @"5.3.0"; if ([num1 compare:num2 ...

  8. django一些操作命令

    1.数据库与class类同步命令 syncdb command is deprecated in django 1.7. Use the python manage.py migrate instea ...

  9. Java中的private protected public和default的区别

    转至:http://blog.sina.com.cn/s/blog_74c571240101jaf5.html    类内部  本包  子类 外部包  public    √  √  √  √ pro ...

  10. [C#].NET中几种Timer的使用

    这篇博客将梳理一下.NET中4个Timer类,及其用法. 1. System.Threading.Timer public Timer(TimerCallback callback, object s ...