• IE6/7和IE8/9(怪异模式)浮动元素折行Bug


    网页设计中,我们经常需要设置一个元素向左或向右浮动。如

    <!DOCTYPE HTML>
    <html>
    <head>
    	<title>IE6/7和IE8/9(怪异模式)浮动元素折行Bug</title>
    	<meta charset="utf-8">
    </head>
    <body>
    <div style="300px;border:1px solid gray;padding:5px;">
           <input type="text" />
           <a href="javascript://;" style="float:right;">搜索</a>		
    </div>
    </body> 
    </html> 
    

    div中有个输入框和链接A,设置链接A向右浮动。各浏览器表现如下

    IE6/7 & IE8/9(Quirks mode) :

    IE8/9(standard mode) & Firefox/Safari/Chrome/Opera :


    可以看到在IE6/7 & IE8/9(Quirks mode) 中,“搜索” 链接折行了,这不是我们想要的结果。解决方式,把Input元素和链接A位置调换。如

    <div style="300px;border:1px solid gray;">	
    	<a href="javascript://;" style="float:right;">搜索</a>
    	<input type="text" />
    </div>
    
  • 相关阅读:
    随便瞎说
    第六次作业
    第五次作业
    第四次作业
    第二次作业
    第一周java心得
    Ext.Net学习笔记之动态加载TabPanel
    Ext.net学习笔记之ViewPort布局
    MyEclipse连接mySql数据库笔记
    配置服务器
  • 原文地址:https://www.cnblogs.com/snandy/p/1981503.html
Copyright © 2020-2023  润新知