我对一行包含三个单元格的表格有疑问。其中两个(左和右)具有固定的宽度/高度，应该显示图像(或者在没有图像时缩小到 0)。中间的单元格占用表格固定总数的剩余空间。
问题:现在我最终得到 3px 的额外空间，“图像容器”似乎通过这些空间扩展(在单元格下方)。例如，您可以通过检查 'starredunread' 元素看到它，它的高度从 20px 增长到 23px。而且我不知道发生了什么，因为默认情况下边距/填充已经关闭并且 border:0 和 border-collapse: collapse 没有帮助。
这是 CSS 文件:
/*------------------------------------------
Reset (from the Yahoo UI Library)
------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}
table{border-collapse:collapse;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0}
a{outline: none;}
/*------------------------------------------
Interface
------------------------------------------*/
body {
top: 0px;
left: 0px;
width: 320px;
height: 480px;
background-color: #f00;
color: #000;
font-family: helvetica, arial, sans-serif;
font-size: 12px;
}
.header {
display: table;
top: 0px;
left: 0px;
width: 320px;
height: 44px;
background-color: #738ba3;
color: #fff;
table-layout: fixed;
border: 0;
border-spacing: 0;
}
.headerrow {
display: table-row;
}
.text {
display: table-cell;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-left: 2px;
vertical-align: middle;
}
.text b {
font-weight: 700;
font-size: 11pt;
}
.date {
display: table-cell;
width: 50px;
vertical-align: middle;
text-align: right;
font-size: 8pt;
padding-top: 3px;
padding-right: 5px;
}
.date b {
font-weight: 700;
line-height: 11pt;
}
.starredunread {
display: table-cell;
top: 0px;
left: 0px;
width: 20px;
height: 44px;
vertical-align: middle;
}
.icon {
display: table-cell;
top: 0px;
right: 0px;
width: 44px;
height: 44px;
}
.content {
display: table;
width: 320px;
background-color: #fff;
color: #000;
font-size: 12pt;
text-align: left;
padding: 15px;
}
.sectionheader {
height: 20px;
}
.sectionheaderrow {
}
.sectionunread {
height: 20px;
}
.sectiontext {
font-weight: 700;
font-size: 9pt;
padding-top: 1px;
}
.smallicon {
width: 20px;
height: 20px;
}
这是 HTML 代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>testHTML</title>
<link rel="stylesheet" href="test.css" type="text/css" media="screen" />
</head>
<body>
<div class="header">
<div class="headerrow">
<div class="starredunread">
<img src="images/testimg_small.png">
</div><!-- end starredunread -->
<div class="text">
<b>Testheader</b><br>
Text for testing - this should overflow with an ellipsis if the text exceeds the size of the container...
</div><!-- end text -->
<div class="date">
<b>11.11.09</b><br>
18:54
</div><!-- end date -->
<div class="icon">
<img src="images/testimg_44x44.png">
</div><!-- end icon -->
</div><!-- end headerrow -->
</div> <!-- end header -->
<div class="content">
More text for testing purposes.<br><br>Not really relevant.<br><br> So don't waste your time reading this. :o)
</div><!-- end content -->
<div class="header sectionheader">
<div class="headerrow sectionheaderrow">
<div class="starredunread sectionunread">
<img src="images/testheader.png">
</div><!-- end sectionunread -->
<div class="text sectiontext">
Another Header
</div><!-- end sectiontext" -->
<div class="icon smallicon">
<img src="images/testimg_20x20.png">
</div><!-- end smallicon -->
</div><!-- end sectionheaderrow -->
</div><!-- end sectionheader -->
</body>
</html>
...没有图像看起来不太好，但无论如何它证明了我的问题。
知道我做错了什么吗？非常感谢您的投入!代码只需要在 Safari/Webkit 中工作。
最佳答案
在严格模式下，图像默认是内联的，因为您使用的是严格模式，所以您需要通过对图像应用 display:block 来手动修复此问题。
"In the early days, experiments with strict mode invariably raised the comment that images suddenly got an odd bottom margin that couldn’t be removed. The cause was that in strict mode is an inline element, which means that some space should be reserved for possible descender characters like g, j, or q. Of course an image doesn’t have descender characters, so the space was never used, but it still had to be reserved.
The solution was to explicitly declare images block level elements: img {display: block}."
关于html - 在 Safari 中每个 DIV 表格元素获得不需要的 1px 额外高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1717175/
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
我使用Nokogiri(Rubygem)css搜索寻找某些在我的html里面。看起来Nokogiri的css搜索不喜欢正则表达式。我想切换到Nokogiri的xpath搜索，因为这似乎支持搜索字符串中的正则表达式。如何在xpath搜索中实现下面提到的(伪)css搜索？require'rubygems'require'nokogiri'value=Nokogiri::HTML.parse(ABBlaCD3"HTML_END#my_blockisgivenmy_bl="1"#my_eqcorrespondstothisregexmy_eq="\/[0-9]+\/"#FIXMEThefoll
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.
查看我的Ruby代码:h=Hash.new([])h[0]=:word1h[1]=h[1]输出是:Hash={0=>:word1,1=>[:word2,:word3],2=>[:word2,:word3]}我希望有Hash={0=>:word1,1=>[:word2],2=>[:word3]}为什么要附加第二个哈希元素(数组)？如何将新数组元素附加到第三个哈希元素？ 最佳答案 如果您提供单个值作为Hash.new的参数(例如Hash.new([])，完全相同的对象将用作每个缺失键的默认值。这就是您所拥有的，那是你不想要的。您可以改用
我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'
这个问题在这里已经有了答案:关闭10年前。PossibleDuplicate:Rubysyntaxquestion:Rational(a,b)andRational.new!(a,b)我正在阅读ruby镐书，我对创建有理数的语法感到困惑。Rational(3,4)*Rational(1,2)产生=>3/8为什么Rational不需要new方法(我还注意到例如我可以在没有new方法的情况下创建字符串)？
我正在尝试用Prawn生成PDF。在我的PDF模板中，我有带单元格的表格。在其中一个单元格中，我有一个电子邮件地址:cell_email=pdf.make_cell(:content=>booking.user_email,:border_width=>0)我想让电子邮件链接到“mailto”链接。我知道我可以这样链接:pdf.formatted_text([{:text=>booking.user_email,:link=>"mailto:#{booking.user_email}"}])但是将这两行组合起来(将格式化文本作为内容)不起作用:cell_email=pdf.make_c
本文主要介绍在使用Selenium进行自动化测试或者任务时，对于使用了iframe的页面，如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候，可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签，如果直接查找是无法找到的，会抛出没有找到元素的异常。比如近在咫尺的例子就是，CSDN的登录窗体就是使用的iframe，大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素，会抛出NoSuchElementException异常。解决