DOCTYPE引起的一系列问题-->Select样式，文本框样式width100%超过父容器

最新推荐文章于 2023-08-10 09:51:53 发布
最新推荐文章于 2023-08-10 09:51:53 发布
阅读量751 收藏
点赞数
HTML <!DOCTYPE> 标签
<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
DOCTYPE的详细说明见W3Schcool：http://www.w3school.com.cn/tags/tag_doctype.asp


笔者的问题：
当不写DOCTYPE或者DOCTYPE为<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">之类的时。代码如下：
[html]  view plain copy
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html>  
  3.     <head>  
  4.     </head>  
  5.     <body>  
  6.         <select>  
  7.             <option>选项...</option>  
  8.         </select>  
  9.         <br><br>  
  10.         <div style="width:200px;background-color: green;">  
  11.                
  12.         </div>  
  13.         <div style="width:200px;background-color: red;">  
  14.             <input type='text' style='width:100%;'>  
  15.         </div>  
  16.     </body>  
  17. </html>  

IE8显示效果：

可以看到这个时候文本框的样式设置width=100% 没有问题的，但是select的样式却奇丑无比。。。

当把DOCTYPE 写成HTML5的<!DOCTYPE html>或者 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">时，代码如下：
[html]  view plain copy
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <head>  
  4.     </head>  
  5.     <body>  
  6.         <select>  
  7.             <option>选项...</option>  
  8.         </select>  
  9.         <br><br>  
  10.         <div style="width:200px;background-color: green;">  
  11.                
  12.         </div>  
  13.         <div style="width:200px;background-color: red;">  
  14.             <input type='text' style='width:100%;'>  
  15.         </div>  
  16.     </body>  
  17. </html>  

IE8显示效果：

这个时候下拉框变美了...文本框则超出....

这个问题找了一个上午，就在即将要放弃的时候。。终于在stackoverflow看到一哥们给出如下的解决方案： 
<code style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, serif;"><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">input</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">[</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">type</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">=</span><span class="str" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent; color: rgb(128, 0, 0);">"text"</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">]</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;"> </span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">{</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">
     width</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">:</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;"> </span><span class="lit" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent; color: rgb(128, 0, 0);">100</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">%;</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;"> 
     box</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">-</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">sizing</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">:</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;"> border</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">-</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">box</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">;</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">
     </span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">-</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">webkit</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">-</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">box</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">-</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">sizing</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">:</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">border</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">-</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">box</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">;</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">
     </span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">-</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">moz</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">-</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">box</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">-</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">sizing</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">:</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;"> border</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">-</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">box</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">;</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">
</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">}</span></code>
代码：
[html]  view plain copy
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <head>  
  4.     </head>  
  5.     <body>  
  6.         <select>  
  7.             <option>选项...</option>  
  8.         </select>  
  9.         <br><br>  
  10.         <div style="width:200px;background-color: green;">  
  11.                
  12.         </div>  
  13.         <div style="width:200px;background-color: red;"  >  
  14.             <!-- 刚开始没有加margin:0px; 后来把文本框放在td中显示有一点点瑕疵,所以加上了 -->  
  15.             <input type='text' style="margin: 0px;width: 100%;padding: 0px; box-sizing: border-box;-webkit-box-sizing:border-box;-moz-box-sizing: border-box;">  
  16.         </div>  
  17.     </div>  
  18.     </body>  
  19. </html>  

IE8显示效果：
HadesCool
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
-doctype-html-html-lang-en-dir-ltr-head-meta-name:
04-07
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
java.lang.IllegalArgumentException: DOCTYPE clause cannot have a non-null PUBLIC ID and a null SYSTE
Amy的专栏
11-28 2320
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 改为<!DOCTYPE html>即可
java.lang.IllegalArgumentExcep：DOCTYPE clause cannot have a non-null PUBLIC ID and a null SYSTEM ID
最新发布
y50458的博客
08-10 189
改成下面即可。
spring boot控制器无法访问到thymeleaf文件及遇到的其他问题
个人学习笔记库，一篇一篇记录成长的足迹
08-05 1200
spring boot整合thymeleaf时遇到的问题。
]!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
回首如梦
04-19 6497
[转载...........] [code="java"] 这段代码叫做DOCTYPE声明。DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。这里说明你用的是"HTML 4.01"版本,类似的还有: 这里声明本文档使用的是XHTML 1.0版本. 其中的DTD(例如loose.dtd)叫文档类型定义，...
使用thymeleaf解决访问不到templates下的html文件
qq_36838406的博客, 微信交流 yrn1840
06-29 1万+
pom文件 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> resources下的 applicati...
CSS设置盒子容器(div)高度(height)始终为100%
11-19
有时需要让一个盒子容器的 高度始终保持100%，无论怎么缩放浏览器高度始终不变。就像一些网站的侧边栏，但直接设置盒子容器的高度为100%是不起作用的。 demo 如果想让一个元素的百分比高度height: 100%;起作用，你...
html-interview-questions:100 多个 HTML5 面试问题
07-24
<section>, <article>, <aside>, <nav>, <header>, <footer>的语义是什么<section>, <article>, <aside>, <nav>, <header>, <footer>以及何时/如何在构建 html 标记时使用它们？ 16. 什么时候应该使用section 、 ...
mobile-select-area：手机联动选择地区
02-04
DOCTYPE> <html> <head> <title>选择日期</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <link ...
select和input不会继承字号body font-size
12-03
复制代码代码如下: <!DOCTYPE html> <... } select,input { font-size:1em; } #page { width:600px; margin:0 auto; } </style> </head> <body> ”page”> 汉字 <form>
DOCTYPE中SYSTEM和PUBLIC区别
softmanfly的专栏
08-26 1759
HTML Declaration DOCTYPEs are required for legacy reasons. HTML is responsible for telling a Web browser how text and other objects in a Web Page should appear. As per HTML standards, each HTM
tomcat错误：java.io.FileNotFoundException: Could not resolve XML resource [null] with public ID [null]
热门推荐
壹龙的专栏
08-13 1万+
关于web.xml中引用其它xml片段，然后运行在tomcat7.0.62上出现的问题具体做法如下： 1，按模块将servelet从web.xml中拷贝出来，放到一个test.xml中，如test.xml中内容如下： <servlet> <servlet-name>testA</servlet-name>
关于在 xmlSPY 出现的错误 DOCTYPE-EXternalID的名称必须既是SYSTEM 又是PUBLIC?(转)
weixin_33861800的博客
11-03 232
 最近我在做学习xml时，遇见一个问题，我本用的是2009 xml spy后来老是出现问题 ，就是不能通过，后来我上网查了一下，发现是以一问题，不管是在2006中还是在2009中，都会出现这样的问题，要解决这样的问题解决的方法就是在把xml文档中的 &lt;!DOCTYPE 书店 SYSTEM "E:/xml/Untitled3.dtd"&gt;改成&lt;?DOCTYPE 书店 SYSTEM ...
Spring配置文件异常：White spaces are required between publicId and systemId
evilcry2012的专栏
10-18 4980
Spring配置文件异常：White spaces are required between publicId and systemId 博客分类：  Exception   1、问题： Java代码   Exception in thread "main" org.springframework.beans.factory.xml.XmlBea
Doctype的作用是什么？标准模式和兼容模式有什么区别？
一许西的博客
02-19 540
Doctype的作用： <!DOCTYPE html> 声明位于HTML文档的第一行，处于<html> 标签之前，让浏览器的解析器知道，用哪种文档标准来解析这个文档。当 <!DOCTYPE html> 不存在或者格式不正确时，会导致文档以兼容模式呈现。 标准模式和兼容模式的区别： 标准模式的排版和JavaScript运作模式 都是以该浏览器支持的最高标准运...
利用所学的html的知识，自制一个管理平时作业的网页，将以往作业通过超链接的方式显示在浮动框架中，用到的知识有：内嵌式框架标记、表单标记、表单域标记、多行文本框、列表选择框、按钮控件、
05-28
<iframe src="homeworks.html" frameborder="0" scrolling="auto" width="800" height="400"></iframe> <!-- 制作一个表单 --> <form> <fieldset> <legend>添加新作业</legend> <label for="hw-name">...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值