草庐IT

css - DOCTYPE 影响 line-height 的渲染

coder 2023-08-04 原文

这个让人头疼。

我创建了一个带注释的 jsFiddle 来演示我最近在使用 Twitter 的 Bootstrap 框架创建一些下拉按钮时遇到的现象。

http://jsfiddle.net/jackwanders/WKvPv/

基本上，当使用 HTML5、HTML 4 Strict 或 XHTML Strict DOCTYPE 时，按钮会按设计呈现。但是，当使用 HTML4 或 XHTML Transitional DOCTYPE 时，插入符号按钮会以较短的高度呈现。这是来自 Bootstrap 的 <span class="caret"> 的相关 CSS (我删除了无关紧要的样式，例如颜色和渐变):

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: top;
  border-top: 4px solid #000000;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  content: "";
}

.btn .caret {
  margin-top: 7px;
  margin-left: 0;
}

.btn {
  display: inline-block;
  *display: inline;
  padding: 4px 10px 4px;
  margin-bottom: 0;
  *margin-left: .3em;
  line-height: 18px;
  *line-height: 20px;
  text-align: center;
  vertical-align: middle;
}

为什么 DOCTYPE 会影响按钮的高度？如果line-height设置为18px，为什么高度会小于18px？

PS - 是的，我知道 Bootstrap 需要 HTML5，但我想这是关于所使用的 HTML5 功能，而不是 DOCTYPE 如何呈现 CSS 样式

最佳答案

在写这个问题和相关的 jsFiddle 演示时，我做了更多的挖掘并发现了正在发生的事情。我想与其放弃这个问题，不如将其与这个答案一起发布。

我在切换 DOCTYPES 后检查 Chrome 中的元素时收集到的是:

  • .btn 没有指定高度，只有 line-height: 18px 和 padding: 4px 10px
  • 在 HTML5 中，插入符号按钮的最终高度为 18px，与定义的 line-height
    • 相同
  • 在 Transitional DOCTYPE 中，仅插入符按钮的高度为 11px，与 插入符 的 outerHeight() 相同(border-top + margin-top)，但小于按钮的line-height。

因此，我只能假设 Strict(和 HTML5)DOCTYPE 将 line-height 强制执行为某种 min-height；即使元素中没有文本，它也会应用 line-height ... 而 Transitional DOCTYPES 则不会。

当我向仅插入符号按钮添加一些文本时(例如  )，然后 line-height 开始使用 Transitional DOCTYPE，按钮呈现在全高。

关于css - DOCTYPE 影响 line-height 的渲染，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11268563/

line-heightDOCTYPEcodeheightcsshtmltwitter-bootstrap

有关css - DOCTYPE 影响 line-height 的渲染的更多相关文章

  1. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  2. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  3. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  4. ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2

    我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？ 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司

  5. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  6. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD

  7. ruby parslet : parsing multiple lines - 2

    我正在寻找一种匹配多行Parslet的方法。代码如下所示:rule(:line){(match('$').absent?>>any).repeat>>match('$')}rule(:lines){line.repeat}但是，lines将始终以无限循环结束，这是因为match('$')将无休止地重复以匹配字符串的结尾。是否可以匹配可以为空的多行？irb(main)>lines.parse($stdin.read)Thisisamultilinestring^D应该匹配成功。我错过了什么吗？我还尝试了(match('$').absent?>>any.maybe).repeat(1)>>

  8. .net - .NET 将如何影响 Python 和 Ruby 应用程序？ - 2

    我很好奇.NET将如何影响Python和Ruby应用程序。用IronPython/IronRuby编写的应用程序是否会非常特定于.NET环境，以至于它们实际上将变得特定于平台？如果他们不使用任何.NET功能，那么IronPython/IronRuby相对于非.NET同类产品的优势是什么？ 最佳答案 我不能说任何关于IronRuby的东西，但是大多数Python实现(如IronPython、Jython和PyPy)都试图尽可能忠实于CPython实现。不过，IronPython正在迅速成为这方面的佼佼者之一，并且在PlanetPyth

  9. ruby-on-rails - Rails 渲染带有驼峰命名法的 json 对象 - 2

    我在一个简单的RailsAPI中有以下Controller代码:classApi::V1::AccountsControllerehead:not_foundendendend问题在于，生成的json具有以下格式:{id:2,name:'Simpleaccount',cash_flows:[{id:1,amount:34.3,description:'simpledescription'},{id:2,amount:1.12,description:'otherdescription'}]}我需要我生成的json是camelCase('cashFlows'而不是'cash_flows'

  10. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

随机推荐