Question

我知道这个主题“听起来”很像其他人，但我已经浏览了所有现有的线程（反正“最”）我还有一个问题我可以使用帮助... < / p>

问题与其他人所描述的并不太相似：

某些FORM元素未显示其完整垂直高度
其中最值得注意的是当坐在按钮或“附加”课程旁边时，INPUT类型看起来有点像贫血
最近我注意到一个更严重的问题......单选按钮变成“无线电点”，因为它们很小，几乎看不到。

现在有很多人通过确保他们在HTML文档的顶部正确指定 DOCTYPE 来解决他们的问题。我也发现这个简单的调整对我的静态HTML模型起了作用。可悲的是，当我切换到Wordpress时，问题再次出现，但我肯定将HTML 5 DOCTYPE签名放在输出的最顶端（我已经用“查看源”检查了几次，因为我想也许我已经丢失了记）。

我已经包含了屏幕的快照，以防这有助于揭示屏幕。你可以在这里找到它：http://www.flickr.com/photos/14261777@N00/6957941282/。注意底部的小小点应该是单选按钮。更明显的是INPUT字段不够高。哦，还有完整性，这里是我的HTML源代码的截图：http://www.flickr.com/photos/14261777@N00/6957952802/。

我很乐意听到任何有关于为什么会发生这种情况的理论以及可能存在的任何变通方法的人（即使解决方案的来源未知）。我已经尝试过强制行高度，高度，最小高度等CSS属性以及其他一些零效果。

Answer 1

看起来你有两个问题。 input type=text问题和radio按钮问题。在没有看到您的代码的情况下，好像您的文本框问题与DOCTYPE有关，并且您的单选按钮问题与覆盖CSS样式有关（可以确认您是否发布了单选按钮的检查器输出）。

如果您的变量显示为正确的值（例如，18px高度），那么它绝对是DOCTYPE问题。

来自A列表中的this article：

您已经完成了所有正确的工作，但您的网站看起来或工作不正常   它应该在最新的浏览器中。

您已经编写了有效的XHTML和CSS。您已经使用过W3C标准   文档对象模型（DOM）来操作动态页面元素。然而，   在用于支持这些标准的浏览器中，您的网站是   失败。错误的DOCTYPE可能会受到指责。

这篇小文章将为您提供有效的DOCTYPE，并解释实用性，   这些看似抽象的标签的真实世界效应。

以下是根据W3C推荐的DOCTYPE列表：

http://www.w3.org/QA/2002/04/valid-dtd-list.html

Answer 2

如果有人有兴趣，这是我为解决问题而添加的内容：

input, input[type="text"], input[type="radio"], isindex, .uneditable-input {
    padding: 4px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #CCC;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #CCC;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #CCC; 
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #CCC;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.input-append .add-on, .input-append .btn {
    margin-left: -6px;
}

input[type=checkbox] {
        -webkit-appearance: checkbox;
}

Twitter引导程序表单字段太小

2 个答案: