小编Tho*_*mas的帖子

可滚动绝对定位div中相对定位的元素在滚动上"滞后"

我有一个PhoneGap应用程序,显示一个很长的文本,包含我在Android上测试的标题,表格和图像.

一切正常,除了带有样式的元素position:relative 这些元素在滚动时"滞后",这意味着如果我滚动页面然后这些元素开始和结束滚动大约四分之一秒.

将绝对div与亲戚和孩子结合使用时会发生错误overflow:auto.删除任何这些东西修复了错误,但我宁愿把它留下来.虽然我愿意删除表并单独显示(如在对话框中),如果必须的话.

该错误仅出现在标准的Android浏览器上(当然还有我的PhoneGap应用程序).到目前为止,我已经使用以下设备对其进行了测试:

  • 三星Galaxy Nexus(4.1.1)
  • 三星Galaxy S III(4.1.2)

任何帮助都表示赞赏,但我更喜欢HTML和功能不会改变(或不太多)的解决方案.

快速滚动后

我创建了一个显示bug 的最小例子.只需在Android上打开它并开始滚动即可立即看到问题:

<!doctype html>
<html>
<head><meta name="viewport" content="initial-scale=1.0"></head>
<body style="margin:0">

<div style="position:absolute;overflow:auto;top:100px;bottom:100px;width:100%">

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a quam arcu. Duis ultrices mollis nibh ut hendrerit. Etiam a interdum metus. Integer volutpat, nibh laoreet euismod suscipit, libero sem iaculis lorem, ut hendrerit magna orci eu elit. Nulla eu ultricies libero. Nulla facilisi. Maecenas nec turpis vitae magna lobortis ornare sit …
Run Code Online (Sandbox Code Playgroud)

html css mobile android cordova

16
推荐指数
1
解决办法
1万
查看次数

使用多部分表单的缺点

我想知道在enctype="multipart/form-data"没有文件输入字段时添加到表单是否有任何缺点.

我在模板中声明了表单,我只需要在某些页面上使用multipart.我应该总是添加它还是只在我需要时添加它?

请求会更大吗?或者是否有任何其他后果(除了Firebug/DevTools中的可读性降低)?

html forms multipartform-data

9
推荐指数
1
解决办法
711
查看次数

Android:未捕获的类型错误:对象函数 Array() { [native code] } 没有方法“from”

WebView使用 html 文件和getTopRow()从 html 文件调用javascript 方法的按钮。在jsfiddle 上工作但 android studio 抛出以下错误的方法:

04-03 22:23:39.437 28260-28260/com.site.project E/Web 控制台:未捕获的类型错误:对象函数 Array() { [native code] } 在 file:///android_asset/ 处没有方法“来自” zbe/zbe.html:9

JavaScript 方法:

function getTopRow(){
    var elements = document.querySelectorAll("p");
    var obj = null;
    window.onscroll = function() {
        if (obj != null) {
          obj.style.backgroundColor = "";
        }
        var top = Number.POSITIVE_INFINITY;
        Array.from(elements).forEach(function(o) {
        var t = o.getBoundingClientRect(o).top;
        if (t > 0.0 && top > t) {
          obj = o;
          top = t; …
Run Code Online (Sandbox Code Playgroud)

javascript jquery android webview jsfiddle

5
推荐指数
1
解决办法
1704
查看次数

在Chrome和Safari中使用valign = top在表格中呈现<sup>错误

我有以下HTML:

<p style="font-family:Verdana">test<sup>2</sup></p>
<p style="font-family:Verdana;vertical-align:top">test<sup>2</sup></p>
Run Code Online (Sandbox Code Playgroud)

问题在于第二个问题

<sup>不再位于上面的文字,但几个像素低.从本质上讲,vertical-align:top除了上标之外,所有文本都会引发:

Chrome 23 Windows

这不会发生在Firefox,Opera中,而是发生在Chrome和Safari(所有Windows)中,而不是某些字体(如Times New Roman).

你认为这是字体的问题还是Webkit中的一个错误?已经报告了一个错误,我附上了我的测试用例,但我不知道它有多快会被解决,因为三年前已经报告了这个错误...

你对解决方法有什么想法吗?如果可能只有CSS更改.

UPDATE

我尝试了建议的解决方案,其中大多数显示与使用sup标签相同.

我创建了一个小提琴来展示不同的实现.

Chrome错误报告:http://code.google.com/p/chromium/issues/detail?id = 23634

css webkit google-chrome superscript vertical-alignment

4
推荐指数
1
解决办法
2665
查看次数

有条件添加到购物车按钮在 Big Commerce 产品详细信息页面上不起作用

我在 BigCommerce 内的产品页面上使用“添加到购物车”按钮时遇到一些问题。我们正在使用 Cornerstone 主题。我可以显示该按钮,但它实际上不起作用,所以这对我来说是一个问题:)我们正在尝试实现一项功能,要求人们登录才能查看我们系统中所选商品的价格。当我们将产品记录推送到 BigCommerce 时,我们会包含一个自定义 HidePrice 字段,并将其值设置为 true 或 false。HidePrice 值为 true 的商品应隐藏其价格,并为可能浏览该网站的访客隐藏“添加到购物车”按钮。如果客户登录,则会显示价格并显示“添加到购物车”按钮。这就是我们到目前为止所得到的。它的工作原理是,它将根据需要隐藏/显示价格和“添加到购物车”按钮,但我们现在的问题是,“添加到购物车”按钮对于尝试将 HidePrice 值为 的产品添加到购物车的客人不起作用错误的。天哪,我希望这是有道理的!我已经确定了问题所在,并在下面的代码片段中注明了这一点。

{{#if customer}} 
    {{#if product.can_purchase}} 
        {{> components/products/add-to-cart}}
    {{/if}}
{{else}}
    {{#filter product.custom_fields 'HidePrice' property='name' }}
        {{#if (toLowerCase value) '==' 'true'}}
            <a href="/login.php" class="login-for-price"><i class="fas fa-unlock-alt"></i>&nbsp;&nbsp;Login to Unlock Price</a>
        {{else}}
            {{> components/products/add-to-cart}} <!-- This is the part that isn't working. The button renders but it doesn't work -->
        {{/if}}
    {{/filter}} 
{{/if}} 
Run Code Online (Sandbox Code Playgroud)

此添加到购物车组件通常会使用按钮的输入标记填写 data-product-url 和 data-product-id 值。使用 Chrome 的开发工具,我可以看到 data-product-url 和 data-product-id 值留空。我可以看到这两个元素应该由 Stencil 中的 templates/components/products/add-to-cart.html …

handlebars.js bigcommerce

2
推荐指数
1
解决办法
465
查看次数