1、在没有添加padding等额外属性的时候，火狐、谷歌、IE都是输出1100px;无横向滚动条
<body> <div id="d1"style="1100px;height:325px;overflow-x:auto;"> <div id="d2" style="auto;"></div> </div> <script> alert($("#d2").css("width")); </script> </body>
2、在里面的DIV添加padding:50px的属性之后，火狐、谷歌、IE都是输出1000px；无横向滚动条
<body> <div id="d1"style="1100px;height:325px;overflow-x:auto;"> <div id="d2" style="auto;padding:50px;"></div> </div> <script> alert($("#d2").css("width")); </script> </body>
3、在里面的DIV添加padding:50px的属性之后，又加上margin:50px，火狐、谷歌、IE都是输出900px；无横向滚动条
结论:由于有了margin和padding的影响，width属性又设为auto，输出的width由没有这两个属性的时候的1100变成900px
<body> <div id="d1"style="1100px;height:325px;overflow-x:auto;"> <div id="d2" style="auto;padding:50px;margin:50px;"></div> </div> <script> alert($("#d2").css("width")); </script> </body>
在里面的DIV添加padding:50px;margin:50px的属性之后，又加上min-1000px，火狐、谷歌、IE都是输出1000px；出现横向滚动条
可以得出结论，在例子3中，由于有了margin和padding的影响，width属性又设为auto，输出的width是900px，但是我们在这里又加上了min-1000px，显然以前的900px已经小于了min-width，故现在的width应该等于min-width，为1000,又加上padding和margin，共200，超过了1100，所以会出现滚动条。如果此时把min-width的值设置为小于等于900的值，滚动条是不会出现的。
<body> <div id="d1"style="1100px;height:325px;overflow-x:auto;"> <div id="d2" style="min-1000px; auto; padding: 50px; margin: 50px;"></div> </div> <script> alert($("#d2").css("width")); </script> </body>