10

我知道这个主题“听起来”很像那里的其他主题，但我已经查看了所有现有的线程（无论如何都是“大多数”），我仍然有一个问题我可以使用帮助......

这个问题与其他人所描述的并没有太大的不同：

  • 某些 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 属性，如 line-height、height、min-height 等以及其他一些零效果。

4

2 回答 2

10

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

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

来自A List Apart 上的这篇文章：

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

您已经编写了有效的 XHTML 和 CSS。您已使用 W3C 标准文档对象模型 (DOM) 来操作动态页面元素。然而，在专为支持这些标准而设计的浏览器中，您的网站却失败了。错误的 DOCTYPE 可能是罪魁祸首。

这篇小文章将为您提供有效的 DOCTYPE，并解释这些看似抽象的标签的实际效果。

以下是 W3C 推荐的 DOCTYPE 列表：

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

于 2012-04-23T14:49:59.543 回答
1

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

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;
}
于 2012-04-23T21:45:13.780 回答