标签: html-rendering
在Firefox和Chrome中呈现HTML
<div style="float: left;
height: 20%;
width: 70%;"</div>
<div style="float: right;
height: 20%;
width: 30%;"> </div>
在Chrome中,这两个部门在同一行.但两个div之间存在一个小差距.但在Firefox中没有差距.为什么会这样？对此有何解决方案？
推荐指数
解决办法
查看次数
如何在折叠时修复相邻TD边界的不一致渲染？
我有一个带有折叠和相邻边框的HTML表格以及所有单元格上的标准边框,我想将特定行的边框颜色更改为其他内容.问题是当边框折叠并且相邻单元格具有不同的颜色(或者通常我假设的样式)时,浏览器不会以视觉上可接受的方式呈现.
这是我的HTML:
<table>
<tr><td>Lorem</td><td>Ipsum</td></tr>
<tr><td>Lorem</td><td>Ipsum</td></tr>
<tr id="foo"><td>The border of these cells</td>
<td>is not uniformly red!</td></tr>
<tr><td>Lorem</td><td>Ipsum</td></tr>
</table>
CSS:
table { border-collapse: collapse; border-spacing: 0 }
td { padding: 5px; border: 3px black solid; }
#foo td { border: 3px red solid; }
不同的浏览器如何呈现它:
IE 7(标准):
IE 8和9(标准):
Firefox 11(注意左边红色边框上的微妙视觉效果以及它选择渲染角落的古怪方式):
Chrome 18:
问题是:我能做些什么来获得视觉上可接受的渲染？这可以渲染出"红色边框总是优先于黑色边框"的理想吗？
澄清:
我首先寻找纯CSS解决方案.
如果这是不可能的,我会使用需要进行小规模和局部修改的东西(即不是我在每个桌子上都必须做的事情).
Javascript是可以接受的,因为在实际网站中,控制边框的样式是基于用户交互动态应用的.事件处理程序由与此几乎相同的代码设置.
推荐指数
解决办法
查看次数
Outlook 2013呈现问题：嵌套表会截断相邻文本
在开发html电子邮件新闻通讯时，我经常使用类似于以下内容的结构：
<table width="244" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffcc">
<tr>
<td>
<table border="0" align="left">
<tbody>
<tr>
<td bgcolor="#FFCCCC">text in the table cell.<br>and another line of text.<br>and a third line.</td>
</tr>
</tbody>
</table>
Hello. This is sample text. This is another sentence. Hello. This is sample text. This is another sentence. Hello. This is sample text. This is another sentence.</td>
</tr>
在浏览器中查看时，结果如下所示：
但是当由Outlook 2013呈现时，主（黄色）表中最左边的文本被切除：
是否有解释或解决方法？
（我通常将图像而不是文本放在内部（粉红色）表中。这样可以进行设计，使主要（黄色）文本似乎在图像周围流动。无论图像还是文本，结果都是相同的。如此处所示，主（黄色）表中的文本被截断了。）
推荐指数
解决办法
查看次数
MS Edge使用什么渲染引擎？我可以将它嵌入C#中吗？
喜欢在标题中.当
我想要创建浏览器时,我怎么能做到这一点,这太棒了!
如果有人可以帮助我,请!
谢谢你提前:)
推荐指数
解决办法
查看次数
有没有例子证明微任务是在渲染之前执行的？
我看到几篇文章说渲染步骤是在微任务之后。
我用这段代码测试它：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>test</p>
<script>
const p = document.querySelector('p');
p.textContent = 'text';
Promise.resolve().then(function microtask() {
debugger;
p.textContent = 'Promise';
});
</script>
</body>
</html>
这段代码似乎表明 UI在微任务运行之前重新渲染。
难道是我想错了？有没有什么好的例子表明渲染是在微任务运行之后进行的？
推荐指数
解决办法
查看次数
MVC3 ascx与razor页面呈现问题
我有一个正确呈现的aspx网页.当转换为剃刀时,它不会.这是一个简化的例子(剥离所有无关的东西).
ASPX:
<asp:Content ID="indexContent" ContentPlaceHolderID="ToolContent" runat="server">
<% string test = "<div><b>Tag Test</b></div>"; %>
<h2><%= test %></h2>
</asp:Content>
剃刀:
@section ToolContent {
@{ string test = "<div><b>Tag Test</b></div>"; }
<h2>@test</h2>
}
aspx按预期呈现.剃刀只在标头标签中显示"test"(<div> <b>标签测试</ b> </ div>)的内容.
我认为我对剃刀的理解是有缺陷的.如果有人能够启发我和/或向我展示解决方案/解决方案,我将非常感激.
推荐指数
解决办法
查看次数
html斜体字母从其容器突出（并且可能会被下一个容器的背景剪切）
为了说明此问题（出于演示目的，背景使用alpha 0.2）：http : //jsfiddle.net/Novado/enhuc4jv/1/
<span style="font-family: impact; font-size: 500pt; font-style: italic;">
<span style="border: 1px dotted #000;background-color: rgba(10, 10, 10, 0.2);"><span style="border: 1px solid red;color: red;background-color: rgba(200, 0, 0, 0.2);">World</span> </span><span style="border: 1px dotted green; background-color: rgba(200, 0, 0, 0.2);"><span style="border: 1px solid blue; color: blue;background-color: rgba(0,0,200,0.2);">World</span> </span>
</span>
故意缺少中断符号：html代码是后端生成的，字体样式可能会有所不同。可惜我还不能发布图片。如果在示例中删除“ nbsp;”符号，您将看到第一个单词的最后一个字母将被下一个容器的背景部分剪切。
我在此问题上发现的所有内容（多少有些）是此链接：http : //www.positioniseverything.net/explorer/italicbug-ie.html
通常，某些字母（例如'j'，'f'，特别是斜体）会从其容器盒中伸出（如果没有填充物的话）。
但是，为什么呢？据我了解-这是html标准，但我找不到确切的文档，也找不到该行为背后的原因...
有人可以解释为什么这种行为被认为是正常的吗？并且对于“背景切割字母”问题有很好的解决方案吗？因为我看到的每个所见即所得也都受此影响，但是我似乎找不到任何抱怨的人（嗯，也许我只是在搜索查询上很烂，谁知道）。
推荐指数
解决办法
查看次数
如何在模板上将包含 html 内容的打字稿字符串变量显示为元素，而不是字符串？
我有一个角度应用程序，我在组件打字稿中有以下内容：
field: string;
constructor() {
this.field = "Hello, I am <b>happy</b><br><br><input type='text' value='hello' />"
}
在我的组件 html 模板中，我有以下内容：
<div [innerHTML]="field"></div>
我期待一个输出：
Hello, I am happy(happy in bold)
[Text input field here]
相反，整个输入标签被省略。知道如何将这样的 html 内容渲染到角度模板上吗？
推荐指数
解决办法
查看次数
如何在 Angular 中不添加标签的情况下呈现一个innerHTML
<div [innerHTML]="'<b>HEY</b>'"></div>
效果很好！但问题是我不希望将div或任何其他元素添加到页面中。我只想将innerHTML 内容呈现到页面。我试过ng-container而不是，div但它不起作用。我怎样才能让它发生？
推荐指数
解决办法
查看次数
Markdown 文件的客户端渲染
人们可以按照Marked 库文档并内联渲染 Markdown 字符串。这是一个工作代码片段。
<div id="content"></div>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
document.getElementById('content').innerHTML =
marked.parse('# Hello Ayan \n\nRendered by **marked**.');
</script>有没有办法将文件传递到marked.parse函数或通过任何其他客户端 Markdown 渲染库并渲染整个文件而不仅仅是字符串？我研究了获取 markdown 文件并将其作为字符串传递。但是，我找不到直接的方法。
该文件与此 HTML 文件位于同一文件夹中，并将使用 GitHub Pages 从 GitHub 提供服务。不过，如果需要，我可以使用 CDN 的绝对链接。我如何将内容传递给marked.parse()？marked.parse(Hello.md)没用。
推荐指数
解决办法
查看次数
标签 统计
html-rendering ×10
html ×3
angular ×2
css ×2
asp.net ×1
c# ×1
client-side ×1
dom ×1
event-loop ×1
firefox ×1
html-email ×1
javascript ×1
markdown ×1
outlook-2013 ×1
razor ×1
typescript ×1