在调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. NodeJS 模块开发及发布详解

    NodeJS 是一门年轻的语言,扩展模块并不太全,经常我们想用某个模块但是却找不到合适的.比如前两天我需要使用hmac和sha1来做签名,就没有找到一个比较好用的模块,这时候就需要我们自己来实现相应的 ...

  2. Oracle 在线重定义表分区

    ==================原始表================原始表=====================原始表 create table BUILDING_temp(building ...

  3. DIV+CSS中标签dl dt dd常用的用法

    转自:http://smallpig301.blog.163.com/blog/static/9986093201010262499229/ < dl>< /dl>用来创建一个 ...

  4. APM程序分析-ArduCopter.cpp

    该文件是APM的主文件. #define SCHED_TASK(func, rate_hz, max_time_micros) SCHED_TASK_CLASS(Copter, &copter ...

  5. thinkPHP get

    大家都知道{Think.get.name}是输出get的值但是链接是输不出来的所以我现在先告诉大家一个简单的get值获取,直接在需要get值的链接里写$_GET['name'];就可以使get值附值给 ...

  6. 虚拟机安装windows服务出现无法打开内核设备“\\.Global\vmx86”

    解决方法: 在cmd下依次输入net start vmci,net start vmx86,net start VMnetuserif三个命令即可

  7. Java笔记：关键字

    关键字 描述 abstract 抽象方法,抽象类的修饰符 assert 断言条件是否满足 boolean 布尔数据类型 break 跳出循环或者label代码段 byte 8-bit 有符号数据类型 ...

  8. angularjs 设置全局变量的3种方法

    angularjs自身有二种,设置全局变量的方法,在加上js的设置全局变量的方法,总共有三种.要实现的功能是,在ng-app中定义的全局变量,在不同的ng-controller里都可以使用. 1,通过 ...

  9. 【Java EE 学习 82 上】【MAVEN基本安装和使用方法】

    一.Maven概述 1.什么是Maven? Maven中文意思是"行家"."专家",它是一种跨平台的项目管理工具. 2.Maven有什么作用? Maven能够实 ...

  10. win10常用帮助

    添加自启动项: C:\ProgramData\Microsoft\Windows\Start Menu\Programs\StartUp shell:startup win10找回图片查看器: Win ...