safari 中使用CSS 样式float的有关问题
日期：2014-05-17 浏览次数：21003 次
safari 中使用CSS 样式float的问题。
现有HTML文件如下：
<html>
<body>
<div style ="width:560px; margin-top:10px; text-align:left;">
<input type= "button" id = "file_checkall_button" value="All" class = "f_left" style="float:left;" onclick="FileM_SelectAll()"/>
<input type= "button" id = "file_inverse_button" value="Invert" class = "f_left" style="float:left;" onclick="FileM_InvertSelection()"/>
<span id = "search_file_list_page" style ="width:180px; height:25px; line-height:25px;float:left; text-align:center;">0/0</span>
<input type = "button" id = "Button1" class = "f_right" style="float:right;" value = "Lock" onclick = "FileLock()"/>
<input type = "button" id = "Button2" class = "f_right" style="float:right;" value = "unLock" onclick = "FileUnlock()"/>
<input type = "button" id = "Button3" class = "f_right" style="float:right;" value = "Delete" onclick = "FileDelete()" />
<input type = "button" id = "Button4" class = "f_right" style="float:right;" value = "rtese" onclick = "FileDelete()" />
</div>
<div style ="width:560px;margin-top:10px; text-align:right;">
<input type = "button" id = "file_lock_button" value = "Lock" onclick = "FileLock()"/>
<input type = "button" id = "file_unlock_button" value = "unLock" onclick = "FileUnlock()"/>
<input type = "button" id = "file_del_button" value = "Delete" onclick = "FileDelete()" />
</div>
</body>
</html>
在IE下显示一切正常 但是在safari下显示value = "Lock"的button竟然在上一行了。跟value = "unLock"和value = "Delete" 的两个button不在同一行。
------解决方案--------------------
根本原因是因为 INPUT 的宽度在各浏览器中的计算后的值不同。因为，
1. 根据浏览器不同，默认字体可能不同，因此，子宽不同。
2. INPUT 在各浏览器中的默认padding、border 和 margin也是不同的；
所以，在第一个 DIV 中，DIV 设置的560px的宽度，减去浮动元素占用的，Safari和Chrome中还能乘的下那个 INPUT lock的位置，但是Firefox和IE中，剩余的宽度小，因此lock会放到下一行。
你第一个DIV没有设置高度，浮动元素也不参与 DIV的高度计算，所以第一个div的高度的计算值为0；也就是说你第一个DIV里所有的浮动元素都溢出DIV了，因此，第二个div里的行内元素就应该围绕浮动元素显示，在Firefox里，第一行能放得下一个INPUT lock，所以就放到第一行了。
解决方式很简单，给你第一个DIV设置 overflow:hidden （可以创建BFC）让第一个DIV的高度自己计算，或者清楚浮动，就可以了。
现有HTML文件如下：
<html>
<body>
<div style ="width:560px; margin-top:10px; text-align:left;">
<input type= "button" id = "file_checkall_button" value="All" class = "f_left" style="float:left;" onclick="FileM_SelectAll()"/>
<input type= "button" id = "file_inverse_button" value="Invert" class = "f_left" style="float:left;" onclick="FileM_InvertSelection()"/>
<span id = "search_file_list_page" style ="width:180px; height:25px; line-height:25px;float:left; text-align:center;">0/0</span>
<input type = "button" id = "Button1" class = "f_right" style="float:right;" value = "Lock" onclick = "FileLock()"/>
<input type = "button" id = "Button2" class = "f_right" style="float:right;" value = "unLock" onclick = "FileUnlock()"/>
<input type = "button" id = "Button3" class = "f_right" style="float:right;" value = "Delete" onclick = "FileDelete()" />
<input type = "button" id = "Button4" class = "f_right" style="float:right;" value = "rtese" onclick = "FileDelete()" />
</div>
<div style ="width:560px;margin-top:10px; text-align:right;">
<input type = "button" id = "file_lock_button" value = "Lock" onclick = "FileLock()"/>
<input type = "button" id = "file_unlock_button" value = "unLock" onclick = "FileUnlock()"/>
<input type = "button" id = "file_del_button" value = "Delete" onclick = "FileDelete()" />
</div>
</body>
</html>
在IE下显示一切正常 但是在safari下显示value = "Lock"的button竟然在上一行了。跟value = "unLock"和value = "Delete" 的两个button不在同一行。
------解决方案--------------------
根本原因是因为 INPUT 的宽度在各浏览器中的计算后的值不同。因为，
1. 根据浏览器不同，默认字体可能不同，因此，子宽不同。
2. INPUT 在各浏览器中的默认padding、border 和 margin也是不同的；
所以，在第一个 DIV 中，DIV 设置的560px的宽度，减去浮动元素占用的，Safari和Chrome中还能乘的下那个 INPUT lock的位置，但是Firefox和IE中，剩余的宽度小，因此lock会放到下一行。
你第一个DIV没有设置高度，浮动元素也不参与 DIV的高度计算，所以第一个div的高度的计算值为0；也就是说你第一个DIV里所有的浮动元素都溢出DIV了，因此，第二个div里的行内元素就应该围绕浮动元素显示，在Firefox里，第一行能放得下一个INPUT lock，所以就放到第一行了。
解决方式很简单，给你第一个DIV设置 overflow:hidden （可以创建BFC）让第一个DIV的高度自己计算，或者清楚浮动，就可以了。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
