table-layout:fixed在Safari下的一个BUG

为什么80%的码农都做不了架构师？>>>   

出现此bug的条件：

	1、table 设置 table-layout:fixed;
	2、table 设置非 width:auto;
	3、td 设置固定宽度[不能是百分比];

导致的结果，用一个实例一看就明白了：

	table {table-layout:fixed;border-collapse:collapse;width:500px;}
	td {padding:10px;border:1px solid #333;word-break: break-all;}
	td:first-child {width:100px;}

	正常情况下，表格的第一个单元格的占的宽度应该是 100px + 20px + 1px = 121px;
	但是，在Safari下占的宽度为 100px；padding 和 border 的值实际上包含在了width里面；
	整个单元格所占的宽度只受width值影响；

解决办法：

	CSS3有个 box-sizng 的属性，可以定义padding和border是否包含在width里面；
	关于 box-sizing 的具体用法可以百度一下，很多的。但这里，即使设置box-sizing:border-box;也不行；
	
	针对Safari单独定义一个 td 的宽度，此宽度需包含padding和border的值；
	[Safari td]width = border-left + padding-left + width[默认的] + padding-right；

	可是要怎么单独针对Safari写样式呢？
	因为Safari的内核跟Chrome是一样的；网上说的加中括号，Chrome也是识别的；
	没办法啦，只能针对Safari和Chrome单独写啦：

	td:first-child {width:100px;[width:100px; width:121px;]} 
	//中括号中必须写两个样式，最终识别后一个；
			
	或者

	@media screen and (-webkit-min-device-pixel-ratio:0){
		td:first-child {width:121px;} 
	}

	当然，也可以针对Safari和Chrome设置table-layout:auto;

转载于:https://my.oschina.net/ito/blog/86468