小编Tob*_*aus的帖子

我几次遇到这个问题，想知道是否有解决这个问题的方法。我的问题发生在Chrome移动应用上。在那里，您可以向下滚动一点，地址栏消失。到目前为止，很好，让我们举一个例子：
容器height设置为100vh。

如您所见，底部被切除。

当我向下滚动时，它看起来像这样：

现在看起来不错。因此，很明显，Chrome将地址栏的高度计算为视口高度。所以我的问题是：

有没有办法，不管有没有地址栏，它看起来都一样？这样容器会膨胀吗？

我有一个表(用PHP创建(来自mySQL的数据)),如下所示:

<table class="data-table">
  <tbody>
    <tr>
      <td class="databasecontent">maybe some values</td>
      <td class="databasecontent">maybe empty</td>
    </tr>
    <tr>
      <td class="databasecontent">another row</td>
      <td class="databasecontent"></td>
    </tr>
  </tbody>
</table>

然后我得到了一个列表,我希望内容附加到:

<ul class="plannerlist" id="plannerlist2">
</ul>

(我<ul>总共得了6个id="plannerlist1, 2, ...").
所以我希望文本.databasecontent:nth-child(1)来附加到ul#plannerlist1这个JS:

var database1 = $("td.databasecontent:nth-child(1)").text;
$("ul#plannerlist1:visible").append('<input type="text" readonly value="' + database1 + '">');

var database2 = $("td.databasecontent:nth-child(2)").text;
$("ul#plannerlist2:visible").append('<input type="text" readonly value="' + database2 + '">');

and so on...

我认为jQuery应该可以工作,但它只是给我一个输入值:

function (a){return S(this,function(a){return void 0===a?r.text(this):this.empty().each(function(){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||(this.textContent=a)})},null,a,arguments.length)}

我的代码有问题吗？

我目前正在创建一个codepen,您可以在打开contextmenu时更改页面上每个元素的颜色,背景颜色,文本等.

我存储了元素,我在变量中右键单击:

var x = event.clientX, y = event.clientY,
    efp = document.elementFromPoint(x, y);

当我efp在控制台中返回该变量的值时,它会返回正确的元素.

现在的问题是:
改变颜色,例如文本元素,工作正常.但是当我再次尝试这样做时,它不仅会改变元素,还会改变我之前改变过的元素.

像这样:
更改颜色p- >更改p
更改背景section- >更改section 和 p
更改颜色h1- >更改h1 和 section AND p

这是我的完整代码:

$(document).on("contextmenu", function(e){
  $('.custom-menu li').show(0);
  e.preventDefault();
  var el = e.target.nodeName;
  var x = event.clientX, y = event.clientY,
      efp = document.elementFromPoint(x, y);
  console.log(efp);
  switch(el){
    case "P":
      ctxP();
      break;
    case "CONTENT":
      ctxCon();
      break;
    case "HEADER":
      ctxHead();
      break;
    case "FOOTER":
      ctxFoot(); …

我遇到了以下问题：我得到了一个<figure>，它<figcaption>可能会溢出<figure>. 你可以在下面的小提琴中看到：

body{
  display:flex;
  justify-content:center;
  align-items:center;
}
figure{
  width:300px;
  height:500px;
}
img{
  width:100%;
}
figcaption{
  position:relative;
  top:-50px;
  display:inline-block;
  font-size:3em;
  white-space:nowrap;
  text-align:center;
  font-weight:bold;
  width:100%;
}

<figure>
<img src="https://www.zooroyal.de/magazin/wp-content/uploads/2017/03/Golden-Retriever-760x560.jpg">
<figcaption>Golden Retriever</figcaption>
</figure>

我想要实现的是，<figure>无论文本是否比图形宽，文本仍以 为中心。

我想不出可能的解决方案。有谁知道实现这一目标的方法？请不要使用 JavaScript。

所以我遇到了以下问题：

首先，这是一个代码片段

body{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100vw;
  height:100vh;
  overflow:hidden;
}
.box{
  width:100px;
  height:100px;
  background:#545454;
  overflow:visible;
  filter:url("#distort");
}
svg{
  display:none;
}

<div class="box"></div>

<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1">
    <defs>
        <filter id="distort">
          <feGaussianBlur in="SourceGraphic" stdDeviation="20">
        </filter>
    </defs>
</svg>

如您所见，模糊似乎是有限的。这是 Photoshop 中相同的模糊效果：

模糊应该导致某种圆形而不是正方形。框的溢出设置为visible，但这应该不会导致问题，因为模糊的一部分在框的边界框之外：

有谁知道如何删除该边界框并达到与 Photoshop 中相同的效果？

我有一个我创建的某种灯箱的画廊.灯箱是position:fixed和top:0.所以,如果我是对的,它应该处于相同的位置,无论我是否向下滚动.不幸的是,事实并非如此.

我无法在小提琴中重现这个问题.你可以在这里查看:http://tobiasgla.us/portfolio.您可以在手机上打开或使用Chrome中的设备工具栏.

以下2个对象获取了该position:fixed属性,该属性无效:

.item-content{
   width: calc(100% - 100px);
   height: calc(100vh - 100px);
   position: fixed;
   top: 0;
   left: 0;
   margin: 50px;
}
.dupe.dupAnim{
   top:0;
   left:0;
   width:calc(100% - 100px);
   height:250px;
   margin:50px;
   position:fixed;
}

谢谢你的帮助!