Fatal编程技术网
  • html/
  • Html 如何使用css进行高度压缩

Html 如何使用css进行高度压缩

html css

Html 如何使用css进行高度压缩,html,css,Html,Css,我已经得到了一个可以帮助我证明我的问题的证据；如果您正在使用FF，则将帮助您查看mht文件。您可能需要下载该文件并在本地查看，因为github没有为该文件提供正确的mime类型 基本上我的问题是，我有一个高度为32px的div环绕着另一个高度为29px的div，我不知道为什么前者高32px。。它应该有29像素高。。我不想将height:29pxtho设置为0，因为如果调整窗口大小，使导航项目占用两行，则无论div还是的高度都不应为29px 那么这里出了什么问题？显然#导航第二次有填充：0 0 3

我已经得到了一个可以帮助我证明我的问题的证据；如果您正在使用FF，则将帮助您查看mht文件。您可能需要下载该文件并在本地查看，因为github没有为该文件提供正确的mime类型

基本上我的问题是，我有一个高度为32px的
div
环绕着另一个高度为29px的
div
，我不知道为什么前者高32px。。它应该有29像素高。。我不想将
height:29px
tho设置为0，因为如果调整窗口大小，使导航项目占用两行，则无论
div
还是
的高度都不应为29px


那么这里出了什么问题？
显然
#导航第二次
有
填充：0 0 3px在
unnamed-1中设置。css
在
第2行
进行以下更改-

（-）使您的
ul
和
wrapper div
底部对齐更改类
#导航辅助ul.base

有一个
显示：表格而不是
显示：内联块


（-）要删除底部的3倍蓝色，请将class
#navigationSecondary
更改为具有
填充：0如Marcel所建议。
ul内部的所有东西。底座的高度为24px。它本身有一个2px的填充。所以它的高度是26px。它的父级div.wrapper的高度为29像素，额外增加3倍。这不是由div#navigationSecondary的3px填充引起的。没有什么是额外的3倍，所以我怀疑浮动问题。无论如何，我设法通过浮动2个div来修复它


    

  • 添加<代码>浮动：左；宽度：100%到div.wrapper和div#navigationSecondary
    • 

  • 删除
    显示：内联块来自ul.base
    • 


浮动
div.wrapper
和
div#navigationSecondary
将它们折叠到最近的浮动子元素，在本例中为
li.base
，并删除额外的3px。100%宽度可恢复弹性


希望这有帮助。
使用
显示：内联块是原因

当您使用它时，它会像内联元素一样格式化元素（它只会像块一样格式化元素的实际内容），因此
ul.base
将具有普通内联元素通常的2-3px顶部和底部“填充”。它并不是真正的填充，而是领先的垂直间距，也就是说，它为行提供了足够的空间，为字母g、h、p等的上升和下降提供空间

这里使用它是为了让您的ul看起来包含浮动的子列表元素。要使元素包含其浮动子元素，还有其他方法，一种方法是，在
ul.base

删除：
显示：内联块

添加：
溢出：隐藏

[更新]重新设置选项卡。。对不起，我开始之前没看到他们

这里有一个“float everything”解决方案，用于在应用于代码时包含子浮动，还有一些其他建议


  • .menuContainer
    它只需要位置：相对；边界权利规则
    • 

  • .navigationSecondary
    将其向左浮动，宽度为100%；（您可以删除z索引，因为它不做任何事情）
    • 

  • .wrapper
    以100%的宽度向左浮动，移除高度
    • 

  • ul.base
    实际上不需要任何东西，只需要删除显示内联块。。它不包含子列表，但没有影响，如果你想，你也可以用100%的宽度浮动它
    • 
[更新2]
我只是将其复制到一个普通的HTML文档中，我认为只要将DOCTYPE更改为HTML4过渡类型，就可以在不更改代码的情况下解决问题？？（我不太清楚为什么会改变显示方式！-但是在严格的doctype中“不允许”使用“target=\u parent”，所以这就是为什么它不能验证）
    
我将把它放在JSBIN中，以便其他人可以在各种浏览器上试用
    
我把它改成：
    

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

    

    

    
jsbin（带有原始的HTML5 doctype）在这里-显示了差距
    
jsbin更改了Doctype-但没有更改CSS代码-使用flash视频显示下拉列表正在工作-此处：-没有间隙
    
jsbin没有对Doctype进行任何更改，建议对代码进行更改，显示z索引工作的flash插入如下：
    
对于后者，代码更改将在源代码中详细说明，它们已移动到快照CSS的底部
    
我已经在IE7、IE8、FF3.6.15、Safari4（Win）和Chrome中测试了更改后的Doctype版本

    <body style="zoom:0.99; -moz-transform: scale(0.99); -moz-transform-origin: 0 0;">

    

    

    相应地调整，并改变左右的高度和宽度
    提供一个测试用例，要求我使用Firefox并下载一个扩展来查看它，这非常烦人
    
不管怎样，我只是这么做了（纯粹是因为赏金），您需要对测试用例进行的唯一更改是：
    

      

    • 在
      #navigationSecondary ul.base
      上，添加
      垂直对齐：顶部
      • 

    • 额外的高度消失了
      • 

    
这是一个基于@clairesuzy的名为
    “jsbin（带有原始HTML5 doctype）”的演示
    。
（唯一的变化是添加了前面提到的CSS规则）：
    

    

    其他答案可能有效（我没有测试它们），但是（如果我正确理解了问题），这是迄今为止最简单的解决方法。
    当然。这很简单。一个非常基本的元素定位问题
    
内联块默认垂直定位

    ul.base
    是一个内联块。这意味着它的间距计算类似于块，但定位类似于内联元素
    
内联元素的默认位置是在文本基线上对齐。但是，文本位于lett的基线下方