标签: html-rendering

项目符号列表项始终缩进1.8em吗？

我做了一个仅限css的下拉菜单.要求是有一个水平条形项目,每个项目都可以下拉垂直菜单.此外,这些项目不应该删除三级菜单,而只是显示项目符号列表.我的html有三个嵌套ul,菜单在所有现代浏览器中都运行良好.它看起来像这样:

原版的

但是,我不喜欢链接后面较暗的盒子是如何从子弹开始的,并没有延伸整个菜单宽度,所以我玩了一下,最后来到这个调整:

#nav li ul li ul li a {
    padding-left:1.8em;
    margin-left:-1.8em;
}

Run Code Online (Sandbox Code Playgroud)

现在,项目符号菜单项看起来就像我想要的那样:

工作的

由于em相对于字体大小的beeing 的性质,它的工作独立于字体大小,如下所示更大的字体大小:

工作(较大的字体)

我在Internet Explorer 8 + 9 + 10(开发者预览版),Firefox 3 + 7,最新的Chrome,Opera和Safari上进行了测试,它就像一个魅力.

但是,我只是不明白为什么正是1.8em才能完成这项工作.为什么每个浏览器到目前为止都缩进了子弹项？我在这个主题上搜索了互联网,但我没有找到任何有用的信息.我可以确定这适用于未来的浏览器吗？这些1.8em是否在HTML标准中指定？

提前感谢任何暗示!

编辑:

对DisgruntledGoat的回答:如果我使用1em/-1em或20px/-20px,它将无效.有了这种风格:

#nav li ul li ul li a {
    padding-left:20px;
    margin-left:-20px;
}

Run Code Online (Sandbox Code Playgroud)

我得到这个(显然不是缩放字体大小)结果为不同的字体大小:

基于像素

类似地,1em/-1em也是关闭的,看起来像在上图中的右侧,但缩放与字体大小.由于某种原因,看起来1.8em仍然是神奇的距离......

css browser fonts cross-browser html-rendering

Phi*_*ier

2017 05-23

8
推荐指数

2
解决办法

2012
查看次数

DIV内BUTTON上方无法解释的空间

前言:我已经阅读了很多关于div周围的图像的文章,周围有一个奇怪的空间,等等.

示例#1:div的不需要的padding-bottom
示例#2:https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps
示例#3:无法消除包含div的2个水平div之间的空间

他们的问题看似相似但与我的不一样.在此示例文档中,边框,填充,轮廓等设置为零..但Opera和Firefox都在div的顶部渲染一个备用像素.第三个可能在这个空间作弊,但没有人似乎回答为什么它在那里..

编辑:我读过很多文章,这些文章很接近回答这个问题,但它们与实际问题似乎有些不同.

我错过了什么？这是我的第一个问题,请耐心等待:)

<!doctype html>
<html>
  <head>
    <title>Anger</title>
    <style>
      *{
        cursor: default;
        margin: 0;
        outline: 0;
        border: none;
        padding: 0;
        text-decoration: none;
      }
      body{
        background-color: #87cefa;
      }
      div{
        background-color: #ffffff;
      }
      button{
        border-radius: 9px;
        padding: 1px 6px 2px 6px;
        font: 14px monospace;
        color: #ffffff;
        background-color: #1e90ff;
      }
    </style>
  <head>
  <body>
    <div>
      <button>Sample Button</button>
    </div>
  </body>
<html>

Run Code Online (Sandbox Code Playgroud)

是否有一些CSS3将使它全部工作？这是一个实验项目,欢迎使用最新的CSS3.

PS:我只关心Opera渲染,虽然Firefox会很好地支持相同的标准兼容代码..谢谢!

html css rendering html-rendering

Fum*_*les

2017 05-23

8
推荐指数

2
解决办法

1697
查看次数

服务器端浏览器

我想知道是否可以在服务器端运行浏览器(特别是浏览器引擎).我不只是想渲染一个页面,而是让浏览器打开一段时间,运行一些JS,点击一下或按下一些键,同时抓住图形输出.

有谁知道如何做到这一点？到目前为止,我唯一的想法是在VNC,RDP等会话中运行浏览器,但这似乎对我来说太过分了.

javascript browser html5 server-side html-rendering

Tob*_*ler

2013 03-29

8
推荐指数

1
解决办法

5813
查看次数

我有一个SVG画布,用户可以选择并调整其中的一些<image>元素.我使用preserveAspectRatio="xMidYMid meet"属性值来保持原始宽高比.原始图像源大多是256x256px大小.在Firefox和IE-11上,当我将<image>元素调整为比原始大小更小的尺寸时,它们看起来非常像素化.在Chrome上,它们看起来非常流畅.我想知道是否有任何css或svg功能可以帮助我让它们在Firefox和IE上看起来更流畅.

谢谢.

编辑:添加样品..

https://jsfiddle.net/p8km6nhc/7/

<svg viewBox="-170 -87 1678 869" style="width: 100%; height: 100%; overflow: hidden; left: 0px; top: -0.800003px;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <defs>
        <filter id="varlikItemShadow1">
            <feGaussianBlur stdDeviation="3" in="SourceGraphic"></feGaussianBlur>
            <feOffset dy="1" dx="1"></feOffset>
            <feMerge>
                <feMergeNode></feMergeNode>
                <feMergeNode in="SourceGraphic"></feMergeNode>
            </feMerge>
        </filter>
    </defs>
    <g>
        <g transform="matrix(1,0,0,1,0,0)">
            <g transform="matrix(1,0,0,1,158,256)">
                <g title="" data-original-title="" data-rounded="yes">
                    <text style="font:0px arial;" x="0" y="1" stroke="none" transform="matrix(1,0,0,1,0,0)" fill="#ffffff" fill-opacity="0.111111">[[VarlikId=3999]]</text>
                    <rect filter="url(#varlikItemShadow1" stroke="#2b5987" stroke-width="2" fill-opacity="0.9" fill="#ffe8f6" ry="10" rx="10" y="0" x="0" height="140" width="1270"></rect>
                    <path d="M0 0 …

Run Code Online (Sandbox Code Playgroud)

html css svg html-rendering image-quality

Nol*_*dor

2015 09-10

8
推荐指数

1
解决办法

2644
查看次数

我如何知道HTML何时完全呈现

情况1:

我加载了一个非常大的HTML页面,其中包含许多复杂的布局和字体.该页面将需要一些未知的时间来渲染.

案例2:

我使用jquery .html()函数对我的DOM进行重大更改.修改后的DOM将需要一些未知的时间来渲染.

在这两种情况下,我希望能够使用微调器覆盖整个屏幕,直到页面完全渲染完毕.

在寻找这个问题的答案时,我发现了类似的问题,但答案并不相关.要明确:

我不想知道DOM什么时候准备好了.

我不想知道何时获取HTTP数据.

我想知道DOM中的所有内容何时完全被绘制到屏幕上.

设置一些最坏情况的超时是不可接受的解决方案.

我需要一个基于WebKit的浏览器的解决方案.

html webkit jquery-ui html-rendering

Gro*_*Com

2010 12-21

7
推荐指数

1
解决办法

2101
查看次数

DOM渲染是否在单个(同步)函数执行期间被禁止阻止？

DOM阻塞是许多人不熟悉JavaScript严格的单线程同步执行模型的事情,但是它通常只是我们想以某种方式解决的问题(使用超时,网络工作者等).一切都很好.

但是,我想知道阻止实际的用户可见渲染是否可以实际依赖.我90%肯定在大多数浏览器中事实上都是如此,但我希望这不仅仅是一个快乐的一致事故.我似乎无法从DOM规范或MDM等供应商文档中找到任何明确的陈述.

令我担心的是,虽然看到页面的DOM更改确实不可见,但内部DOM几何(包括CSS转换和过滤器)在同步执行期间确实会更新.例如:

console.log(element.getBoundingRect().width);
element.classList.add("scale-and-rotate");
console.log(element.getBoundingRect().width);
element.classList.remove("scale-and-rotate");

Run Code Online (Sandbox Code Playgroud)

......确实将报告两个不同的宽度值,虽然页面不会出现闪烁.在添加类(使用while循环)后同步等待也不会使临时更改可见.在Chrome中执行时间轴跟踪显示内部绘制和重新绘制正在发生相同,这是有道理的...

我担心的是,缺乏一个特定的原因,一些浏览器,比如那些处理动力不足的移动CPU的浏览器,可能会选择在该功能的执行过程中实际反映用户可见布局中的那些内部计算,从而导致丑陋在此类临时操作期间"闪现".所以,更具体地说,我要问的是:他们有特定的理由不这样做吗？

(如果你想知道为什么我会关心这一点,我有时需要使用getBoundingRect某个状态的元素来计算计算尺寸,以计划间距或动画或其他类似的东西,而不是实际将它们置于该状态或首先为它们设置动画. ..)

javascript dom html-rendering

rub*_*ruy

2013 11-28

7
推荐指数

2
解决办法

1093
查看次数

在 React 中渲染格式化（未缩小）的 HTML（带有 Next.js 的 SSR）

如何在 React（带有 Next.js 的 SSR）中渲染格式化（未缩小）的 HTML？

预期输出：

<div>
   <div>
       <input type="text" />
   </div>
</div>

Run Code Online (Sandbox Code Playgroud)

现在收到：

<div><div><input type="text"/></div></div>

Run Code Online (Sandbox Code Playgroud)

泰！

html-rendering reactjs server-side-rendering react-redux next.js

Nik*_*vić

lucky-day

7
推荐指数

1
解决办法

1万
查看次数

浏览器如何渲染实际像素

我正在寻找有关浏览器如何在屏幕上呈现/绘制实际像素的解释。
我发现这个答案包含关于浏览器如何从 html 和 css 到屏幕上的实际表示的伟大图像。

但这并没有向我解释实际的绘画步骤是如何实现的。那么实际的框架树是如何绘制的呢？

它是用顶点缓冲区和着色器完成的吗？

例如：一个 div 可以通过创建一个四边形来渲染，然后用一个着色器渲染这个四边形，例如根据样式向 div 添加边框、圆角等？

或者是否使用了其他技术？

这将如何处理长文本？为每个字母生成一个四边形听起来不是很高效？

如果需要额外的上下文或说明，请告诉我！

browser rendering html-rendering

Fut*_*ake

2020 05-31

7
推荐指数

1
解决办法

172
查看次数

如何使用javascript优化渲染大量的DOM元素？

在网页上,我有一个非常大的项目列表(比如产品卡,每个都包含图像和文本) - 大约1000个.我想在客户端上过滤此列表(仅显示那些未过滤掉的项目),但存在渲染性能问题.我应用了一个非常窄的过滤器,只剩下10-20个项目,然后取消它(因此所有项目都必须再次显示),浏览器(非常漂亮的机器上的Chrome)会挂起一两秒钟.

我使用以下例程重新呈现列表:

for (var i = 0, l = this.entries.length; i < l; i++) {
    $(this.cls_prefix + this.entries[i].id).css("display", this.entries[i].id in dict ? "block" : "none")
}

Run Code Online (Sandbox Code Playgroud)

dict是允许的项目ID的哈希值

这个函数本身就会立即运行,它的呈现会挂起.是否有比更改DOM元素的"display"属性更优化的重新渲染方法？

感谢您提前的答案.

javascript performance html-rendering

Ale*_*sky

lucky-day

6
推荐指数

1
解决办法

8460
查看次数

如何使用 flutter_html 包根据 html 标签渲染自定义小部件？

我有一个 HTML 文档，我想使用 flutter_html 插件通过 Flutter 渲染它。我想以不同的方式呈现不同的排版。例如。我想为粗体设置不同的字体和大小，为非粗体设置不同的字体和大小。

我尝试阅读文档，其中包含名为的 Html 构造函数的属性customRenderer，但我无法理解它的实现。

以下是文档中的代码。

  Html(
    data: """
      <!--For a much more extensive example, look at example/main.dart-->
      <div>
        <h1>Demo Page</h1>
        <p>This is a fantastic nonexistent product that you should buy!</p>
        <h2>Pricing</h2>
        <p>Lorem ipsum <b>dolor</b> sit amet.</p>
        <h2>The Team</h2>
        <p>There isn't <i>really</i> a team...</p>
        <h2>Installation</h2>
        <p>You <u>cannot</u> install a nonexistent product!</p>
        <!--You can pretty much put any html in here!-->
      </div>
    """,
    padding: EdgeInsets.all(8.0),
    backgroundColor: Colors.white70,
    defaultTextStyle: TextStyle(fontFamily: 'serif'),
    linkStyle: const TextStyle( …

Run Code Online (Sandbox Code Playgroud)

html-rendering flutter

Sai*_*hal

2020 05-19

6
推荐指数

1
解决办法

6728
查看次数