使用乱序标签来控制HTML的输出效果

在HTML的元素中,有一个比较特殊的元素form。我们用它来收集表单数据并提交给服务器,并且理论上说来它是没有任何的UI被呈现的。当然如果我们在body元素后紧跟一个form,这样一来似乎看不出来有什么UI呈现的问题,可是当form存在于别的元素之中时,就有问题了。

    什么问题呢?看下面的示例,由于页面布局的需要,我需要控制页面的滚动条。我把body的滚动条隐藏掉,然后使用一个div元素来"自制"一个滚动条,html代码如下:
None.gif<html>
None.gif    
<head>
None.gif        
<title>Layout Demo</title>
None.gif        
<meta name="author" content="birdshome@cnblogs.com">
None.gif    
</head>
None.gif    
<body style="border: 2px solid red; overflow: hidden; margin:0">
None.gif        
<div style="border: 2px solid yellow; width:100%; height: 100%; overflow: auto;">
None.gif            
<form>
None.gif                
<div style="width:800; height:800; border: 2px solid blue"></div>
None.gif            
</form>
None.gif        
</div>
None.gif    
</body>
None.gif
</html>
None.gif

    挺好的一个自制的滚动条就出来了,可是如果这时把垂直滚动条拉到底,会发现一个页面布局缺陷,原来在form后IE会默认的加上一个<br>效果显示,如下图:
    IELayout-1.png

    按么把div移到form里面去呢?代码示例为:
None.gif        <form>
None.gif            
<div style="border: 2px solid yellow; width:100%; height: 100%; overflow: auto;">
None.gif                
<div style="width:800; height:800; border: 2px solid blue"></div>
None.gif            
</div>
None.gif        
</form>
    
    这下显示完全乱套了,见下图:
    IELayout-2.png

    产生这样的效果是为什么呢?我记得我原来说过,要让div在overflow为auto的情况下,自动出滚动条有个条件。我当时的实验表明的结论是,不能再width上使用百分比作为度量,而可以在height上使用百分比,后者都是指定的width和height就可以在over条件满足时出滚动条。由于当时我的实验样本有限,我得到这个结论是很不确切的。

    因为从第一个图中,我们看到div的width和height都是百分比度量,而水平和垂直滚动条都出来了。而能不能出滚动条的确切条件是能否更具其容器关系得到确切的width和height值,不管是不是使用百分比来做度量。当然如果容器div使用的是指定的度量,那么出滚动条是很自然的事情。可是如果是百分比怎么办呢?如果百分比度量的parent容器的width和height是确定的值或是可以再通过其parent容器来确定的值,那么就是可以出现滚动条的。比如示例一中,由于body的width和height是确切的值,所以div的width和height都是百分比度量,仍然可以计算出确切的值。对于示例二中的情况,由于form元素没有width和height一说,所以在其内部的元素如果使用百分比度量,就不能计算出确切的width和height的值,所以不能正确的现实overflow的状态。

    一下又扯远了,继续说使用乱序html标签来控制输出效果的事情。显然通过上面的解释,我们只能把div放到body的第一级child上了,可是图一中那个多出来的空白怎么弄掉呢?这里由于form标签本身在解析时的高优先级,使得它对标签是否时well format格式不太敏感,就是说只要有<from>和</form>成对出现就行了,管它位置上是否正确呢。所以我们把代码改为这样:
None.gif<html>
None.gif    
<head>
None.gif        
<title>Layout Demo</title>
None.gif        
<meta name="author" content="birdshome@cnblogs.com">
None.gif    
</head>
None.gif    
<body style="border: 2px solid red; overflow: hidden; margin:0">
None.gif        
<div style="border: 2px solid yellow; width:100%; height: 100%; overflow: auto;">
None.gif            
<form>
None.gif                
<div style="width:800; height:800; border: 2px solid blue"></div>
None.gif            
</div>
None.gif        
</form>
None.gif    
</body>
None.gif
</html>
None.gif

    注意div和form是相互嵌套的,这样的html就能得到我们说期望的UI了,如下图:

    IELayout-3.png

    关于为什么要把body的滚动条hidden掉,然后自己用div来模拟?有空再来说了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/550014.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

百度地图离线sdk java_百度地图SDK java.lang.UnsatisfiedLinkError: Couldn't load BaiduMapSDK...

错误信息java.lang.UnsatisfiedLinkError: Couldn‘t load BaiduMapSDK_v3_2_0_15 from loader dalvik.system.PathClassLoader[DexPathList[[zip file "/data/app/com.example.baidudemo-1.apk"],nativeLibraryDirectories[/data/app-lib/com.example.baidudemo-1, …

杭电2019多校第一场,Problem I,String 2019

题目描述 Tom has a string containing only lowercase letters. He wants to choose a subsequence of the string whose length is k and lexicographical order is the smallest. Its simple and he solved it with ease.But Jerry, who likes to play with Tom, tells him …

2024年最新Python爬虫入门『最强教程』新鲜出炉!

近年来&#xff0c;大数据成为业界与学术界最火热的话题之一&#xff0c;数据已经成为每个公司极为重要的资产。互联网大量的公开数据为个人和公司提供了以往想象不到的可以获取的数据量。而掌握网络爬虫技术可以帮助你获取这些有用的公开数据集。 爬虫能干什么呢&#xff1f;一…

如何使编译的EXE程序能多个运行?

如何使编译的EXE程序能多个运行?方法很简单,把这句话加到EXE对应的INI文件中去allowmultipleinstancesTrue不错吧!:)转载于:https://www.cnblogs.com/Qia_sky/archive/2005/05/18/158119.html

java实现多对多关系的方法_Hibernate一对多关联双向关联代码实现分享

1、创建实体类(Customer.java、Orders.java)package wck.stu.vo.oneToMany_single;import java.util.HashSet;import java.util.Set;public class Customer {private String id "";private String cName "";private String bank "";private S…

使用LUA构建页面

Android&#xff0c;LUA&#xff0c;CoronaCard 使用CoronaCard引擎构建页面&#xff0c;只需要嵌入CoronaView&#xff0c;就可以构建灵活多样的页面。 微游手柄游戏厅 4.0版本&#xff0c;全面改版&#xff0c;使用LUA语言&#xff0c;通过CoronaCard引擎构建。 一 界面效果&…

C#实现Singleton (转载)

您要在 C# 中构建应用程序。您需要只有一个实例的类&#xff0c;并且需要提供一个用于访问实例的全局访问点。您希望确保您的解决方案高效&#xff0c;并且能够利用 Microsoft? .NET 公共语言运行库功能。您可能还希望确保解决方案是线程安全的。 实现策略 尽管 Singleton 是一…

java当中显示紫色_在java中将深色变为亮色

我正在开发一个程序,我从图像的一部分中获取RGB值.我想去除颜色中的黑暗并使其变亮.我所做的是使用Color.RGBtoHSB然后获取亮度通道并将其设置为范围内的最高值,然后将HSB转换回RGB.但是,当我这样做时,颜色会完全改变.这是一个深红色的例子,它变成紫色,我用这个代码.System.out…

iTunes Connect上传APP屏幕快照图片失败 - 您必须上传有效的屏幕快照。

您必须上传有效的屏幕快照。 原因很简单&#xff1a;这个屏幕快照 要用 iPhone截屏才可以&#xff0c;你自已随便在电脑上截个图肯定不行 //------------------------------------------------------------------------------------------------------------------------------…

JQuery VS JS DOM

JQ断断续续的也用了一阵子了.对我来说确实是个小小的突破。之前的javascript 简直是 一塌糊涂。。糊涂到 连:document.getElementById("") 这个语句都不会写。哈哈这也算是选择JQ的一个理由吧&#xff0c;因为JQ 只需要$("#ID") $(".Class") 就可…

java设计模式组合模式详解_《JAVA设计模式》之组合模式(Composite)

在阎宏博士的《JAVA与模式》一书中开头是这样描述合成(Composite)模式的&#xff1a;html合成模式属于对象的结构模式&#xff0c;有时又叫作“部分——总体”模式。合成模式将对象组织到树结构中&#xff0c;能够用来描述总体与部分的关系。合成模式可使客户端将单纯元素与复合…

匹配嵌套的构造(较复杂)

如果还不明白正则表达式中(?:)的使用&#xff0c;请看&#xff1a;http://www.knowsky.com/297.html正则表达式的终极能力 - 递归 今天在QQ问liuzhi如何写一个匹配递归式的正则表达式时&#xff0c;没想到那家伙居然就回答“递归消除”&#xff0c;让我去看编译原理的书。&am…

XAF Excel数据导入模块使用说明与源码

我实现了XAF项目中Excel数据的导入&#xff0c;使用Devexpress 新出的spreadsheet控件&#xff0c;可能也不新了吧:D 好&#xff0c;先看一下效果图&#xff1a;下图是Web版本的。 下面是win版&#xff1a; 功能说明&#xff1a; 支持从Excel任意版本导入数据&#xff0c;可以使…

ASP注入漏洞基础教程(二)

进 阶 篇 在入门篇&#xff0c;我们学会了&#xff33;&#xff31;&#xff2c;注入的判断方法&#xff0c;但真正要拿到网站的保密内容&#xff0c;是远远不够的。接下来&#xff0c;我们就继续学习如何从数据库中获取想要获得的内容&#xff0c;首先&#xff0c;我们先看看&…

java日期用什么属性_java日期以及使用Java反射机制遍历实体类的属性和类型

fmt:formatDate 的输出格式 fmt关于时间格式的输出2004-5-31 23:59:592004-4-123:59:59JSTL标签fmt:formatDate引起的中文乱码问题解决方案解决方法&#xff1a;在后面写上一句&#xff1a;**************************************************Field[] fieldsIssue.class.getDe…

linux 内存清理/释放命令

1.清理前内存使用情况 free -m2.开始清理 echo 1 > /proc/sys/vm/drop_caches3.清理后内存使用情况 free -m4.完成!查看内存条数命令&#xff1a; dmidecode | grep -A16 "Memory Device$" # sync# echo 1 > /proc/sys/vm/drop_caches echo 2 > /proc/sys…

dotnet程序优化心得(三)

&#xff08;4&#xff09;继续优化――用空间换取时间 现在对每一个字符&#xff0c;都要用get_Item(object key)方法过一遍&#xff0c;可这个乖乖方法那么长&#xff0c;肯定太耗时间了&#xff0c;能不能用更简单的手段呢&#xff1f;改Hashtable&#xff1f;哇&#xff0c…

java网页解析包_java 网页解析工具包 Jsoup

Jsoup是一个非常好的解析网页的包&#xff0c;用java开发的&#xff0c;提供了类似DOM&#xff0c;CSS选择器的方式来查找和提取文档中的内容。相关资料如下&#xff1a;今天做了一个Jsoup解析网站的项目&#xff0c;使用Jsoup.connect(url).get()连接某网站时偶尔会出现java.n…

C++/CLI思辨录之传递托管堆地址

新的C特点平衡了把托管堆的地址传递到非托管代码的能力。早期我们遇到的最大问题是&#xff0c;在托管堆中的对象的位置是非静态的。垃圾收集器以变化的时间间隔移动对象。现在新的pin_ptr(别针型指针)的引入禁止垃圾收集器改变在堆上的对象的地址。下面代码展示了别针型指针的…