在调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# Mvc异常处理过滤器

    using System; using System.Text; using EMS.Domains.Core; using System.Web.Mvc; using Json.Net; using ...

  2. ViewPager适配器FragmentStatePagerAdapter 与FragmentPagerAdapter

    使用FragmentPagerAdapter存在删除dataSet顺序错乱的问题 改用FragmentStatePagerAdapter

  3. 控制window.print不打印某些内容

    <style type="text/css" media="print"> .noprint { display:none;} </style ...

  4. IP地址，子网掩码，默认网关，DNS服务器知识详解（转）

    转自:http://www.cnblogs.com/JuneWang/p/3917697.html 为了更深入的学习TCP/IP协议,最近看了不少有关资料,收集整理记录如下,以备后面的使用和方便各位学 ...

  5. EXT.JS的PROXY放在哪里，STORE放在哪里，绝对是个技术活儿啊。

    我理解的是,单独的STORE,会在应用程序开始时就加载, 而VIEWMODEL的STORE,会在VIEW加载时才开始加载. PROXY放在STORE,则会在调用这个STORE的VIEW才能请求服务器数 ...

  6. DBNEWNAME工具介绍

    下面修改数据库的SID和db_name [root@oracle ~]# su - ora11g db11@oracle /home/ora11g$ db11@oracle  /home/ora11g ...

  7. 解决Linux不能上网ping:unknown host的问题

    修改配置文件:/etc/sysconfig/network-scripts/ifcfg-eth0 vim /etc/sysconfig/network-scripts/ifcfg-eth0 在里面添加 ...

  8. 17.Java 反射机制

    1.反射的定义 反射之中包含了一个"反"的概念,所以要想解释反射就必须先从"正"开始解释,一般而言,当用户使用一个类的时候,应该先知道这个类,而后通过这个类产生 ...

  9. RabbitMQ的几种应用场景

    RabbitMQ是一个消息代理,从“生产者”接收消息并传递消息至“消费者”,期间可根据规则路由.缓存.持久化消息.“生产者”也即message发送者以下简称P,相对应的“消费者”乃message接收者 ...

  10. php gzcompress() 和gzuncompress()函数实现字符串压缩

    当我们说到压缩,我们可能会想到文件压缩,其实,字符串也是可以压缩的. PHP提供了 gzcompress() 和gzuncompress() 函数: $string = “Lorem ipsum do ...