Niquelao » 博客档案 » Yo también lo he visto...

» 博客档案 » 你来了… Niquelao - CSS 你来了… 2006 年 11 月 11 日，由 Rumoroso Este artículo voy a comenzar a la inversa。我写的escribirlo de espaldas sino voy a comenzar citando (blockquote-ando) el consejo con el que lo concluiré: Salvo que Seamos Originales y queramosmostrar ese recuadro Generado por el Campo Oculto (“casi oculto”), la solución es simple. Le aplicamos “display: none” 和 arreglado。我认为，在 ocultos 营地中，没有任何 traten de marcar los Campos ocultos 与 una clase para luego aplicarle la propiedad que acabo de escribir。请使用 Firefox 来解释属性选择器： [css]input[type=hidden] { display: none; }[/css] 言归正传……不，这篇文章并不是在讨论如何布局理论上应该隐藏的内容（隐藏类型字段），我说理论上是因为在 Firefox 浏览器中，当我们启用 CSS 并为表单字段的 “display” 属性声明某些值时，隐藏字段就不再隐藏，而是被浏览器渲染出来（正如在 Firefox 浏览器中观察示例，或者如果你信任我们并相信我们所说的话，可以通过接下来的截图看到）。 说到这里可能会产生疑问：为什么要在 “hidden” 字段上应用 display？如果隐藏字段的目的是在不显示的情况下传递信息，为什么会想要显示它？… La respuesta es fácil y quizás se comprenda mejor con un ejemplo: Tenemos el siguiente Formulario: [html] [/html]…然后我们为其应用一些基础样式： [css]form { border: 2px outset; background-color: #CCCCCC; } fieldset { margin: 20px auto; width: 500px; border: 1px solid; padding: 10px; } legend { font-size: 1.5em; color: #000; } label { font-weight: bold; font-size: 1.1em; } fieldset input { display: block; width: 90%; height: 1.3em; line-height: 1.3em; margin-left: 5%; font-size: 1em; } p { text-align: center; margin: 1em 0; } fieldset p { text-align: left }[/css] 我们给表单字段应用了 display: block，以便产生换行，使标签文本位于上方。标签紧邻文本字段上方的布局，使得生成的匿名文本框与字段框有更大的接触面积，从而在视觉上更直接、更快速地建立两者之间的关联（此外，这是我喜欢的方式，就这样）。或许视觉上更容易理解：在上面的图像中显示了三种布局相同表单的方式。 在第一种方式中，label 文本位于字段上方，因此接触面积更大。在另外两种方式中，可以看到如果文本位于其标记的字段旁边，该面积是如何减小的。 此外，第三种方式显示了想要对齐字段之间的问题。而且，这样可以将所有文本字段左对齐，这在很多情况下可能是不理想的，并且当标签在字段之前时可能会产生冲突（因为标签通常长度不一）。问题在于，在 Firefox 中（且仅在 Firefox 中），给 “input” 赋予这个属性会导致隐藏字段被渲染，使其像一个空块。 ¿正确行为还是 Bug？如果观察 IE 的行为，会发现这种情况不会发生。此时，IE 的反对者们可能会说 Firefox 才是正确的，因为在选角时，Firefox 通常被选为“好人”角色。 在这种情况下，让每个人得出自己的结论，但在那之前我想提出几件事（好吧，四件事，“几件”只是种说法）：难道有程序员想要显示由隐藏字段创建的方框吗？

难道设计师打算忽略程序员所做的，并试图自行显示它吗？ ¿Acaso no dice la especación：隐藏控件：作者可以创建不呈现但其值通过表单提交的控件。作者通常使用此控制类型来存储客户端/服务器交换之间的信息，否则这些信息将由于 HTTP 的无状态性质而丢失。 INPUT 元素用于创建隐藏控件。 （隐藏控制）？ ¿Qué Finalidad puede tener elmostrar la caja vacía creada por el Campo Oculto？一个解决方案：除非我们想标新立异，想要显示由隐藏字段（或更准确地说是“几乎隐藏”）生成的那个方框，否则解决方案很简单。给它应用 “display: none” 就解决了。我的建议是，不要试图给隐藏字段标记一个类，然后再应用我刚才写的属性。相反，可以利用 Firefox 能够理解和解释属性选择器这一点： [css]input[type=hidden] { display: none; }[/css] …以及一点反思：Firefox 的开发人员是否考虑过尝试显示其他隐藏的东西，比如光环、灵魂、幽灵……？在把这篇文章发给 Iker Jiménez 之前，我是不是应该等他们成功实现这一点？类别: CSS —> 你可以通过 RSS 2.0 feed 跟踪评论。你也可以留下评论，或从你的网站发送 trackback。前一篇文章：Pero, será lista!! 下一篇文章：¡No habiendo lomo, de todo “no” como! Deja tu comentario Los Campos Nombre y Email son obligatorios Añádenos a… Tags que destacamos en General accesibilidad bert bos blockquote bug cañas citas cite comportamiento conocimiento CSS escuas estándares fieldset Firefox 格式公式 fuentes 隐藏 ie IE 7 信息 javascript legend lista niquelando obligatorio歌剧 Playa q 壁球假期 w3c WCAG xhtml Esta obra está bajo una licencia de Creative Commons .