我正在努力想到一种方法,我可以实现以下目标,我已经逻辑地思考它,我很确定我不能没有javascript(jQuery).

我只是想知道是否有人有任何巧妙的CSS技巧可以实现我想要实现的目标.

在描述上:-).我试图将a垂直对齐div到a span,其中div可能具有取决于内容的不同高度.请参阅下面的图片,以便更好地了解我想要做的事情:

这是我的代码的起点(请原谅缩小,我打算如何输入).

HTML:

<ul>
  <li><a href="address" title="no need for this as custom tooltip will replace">Link Text here</a>
    <div class="tooltip"><span>Description of the link here</span></div>
  </li>
  <li><a href="address">Link 2 Text here</a>
    <div class="tooltip"><span>Description of the link here</span></div>
  </li>
</ul>

CSS:

ul {list-style-type:none;margin:0;padding:0 0 0 30px;overflow:visible;}
li {position:relative;border:1px solid #000;margin:5px 0;}
li a {font-size:14px;}

li .tooltip {position:relative;margin-left:100px;width:140px;padding:10px;font-size:12px;background-color:#fff;border:1px solid #999;border-radius:4px;z-index:10;}

UPDATE

请不要发布有关jQuery或javascript(或显示或隐藏工具提示的任何css代码)的任何答案,我可以自己写.我只是想知道这是否可以用CSS实现.工具提示的功能在这里无关紧要,我只是想听听你对我的调整问题的意见/解决方案:-)

我有一个关联数组,看起来像:

var data = {
    0: {
        'Number_of_Something': 212
    },
    1: {
        'Number_of_Something': 65
    },
    2: {
        'Number_of_Something': 657
    }
}

我需要在字段中提取最高值Number_of_Something,但是,因为它是对象对象中的一个字段,所以它比仅遵循类似于此处概述的方法的方法要复杂一些.

循环遍历对象并存储值,然后在下一个更大时替换它似乎是最简单明了的选项.

我只是问这个问题,以防除了上面提到的方法之外还有一种更简单(更聪明)的方法来实现这个目的吗？

使用CSS创建三角形是非常简单和常见的做法,但是可以使用透明背景和边框以类似的方式创建三角形.

这就是我想要创建的内容:

考虑到三角形通常的制作方式,我真的不知道从哪里开始,因为它们依赖于伪元素和重叠边框等.如果边框是透明的,这显然是不可能的.

有没有人有任何想法如何做到这一点？它甚至可能吗？

我很欣赏这个问题可能有点“基于意见”，但是，我认为一个概括的答案可以非常有助于将来有兴趣了解更多关于 PWA 和 Service Worker 的其他人。

背景

我在网上搜索过，但很惊讶地发现，在选择要由 Service Worker 为 PWA 预缓存的文件时，没有明确说明最佳实践是什么。

有各种文章/文档概述了预缓存的作用及其工作原理（有关更多信息，请参见此处），但没有一篇提供“常见做法”的示例。

题

在标准的渐进式 Web 应用程序中，通常会预缓存哪些文件？

我目前在做什么...

为了确保我的应用程序在离线时尽可能地工作，我预缓存了以下所有文件：

• 该index.html模板（我的应用程序是一个Vue的SPA）
• 所有 JS 文件（包括来自动态导入的 JS）
• 所有 CSS 文件（只有一个）
• 网络清单
• 应用程序使用的任何自定义字体
• 任何所需的语言文件（这是动态的，即只会预缓存当前访问者的语言）
• 所有应用程序图标（请参阅下面的列表）
• 所有启动画面（见下面的列表）

就我而言，这大约为 2MB（申请完成后可能会增加）

应用程序图标细分

• android-chrome-192x192.png
• android-chrome-512x512.png
• apple-touch-icon-120x120-precomposed.png
• apple-touch-icon-120x120.png
• apple-touch-icon-180x180-precomposed.png
• apple-touch-icon-180x180.png
• apple-touch-icon-72x72-precomposed.png
• apple-touch-icon-72x72.png
• apple-touch-icon-precomposed.png
• 苹果触摸图标.png
• icon_128x128.png
• icon_144x144.png
• icon_152x152.png
• icon_192x192.png
• icon_384x384.png
• icon_512x512.png
• icon_72x72.png
• icon_96x96.png
• favicon-16x16.png
• favicon-194x194.png
• favicon-32x32.png
• 图标
• mstile-144x144.png
• safari-pinned-tab.svg

启动画面的细分

• 飞溅-1125x2436.png
• 飞溅-1242x2148.png
• 飞溅-1536x2048.png
• 飞溅-1668x2224.png
• 飞溅-2048x2732.png
• 飞溅-640x1136.png
• 飞溅-750x1294.png

有没有办法本地化 Web 清单？即有多个翻译name，description等等...

我已经想到了几个潜在的解决方案，但它们每个都有很大的缺点......

潜在解决方案 1（首选但不确定它是否有效）

根据 url ( example.com/en/foo) 中的区域设置，加载相关清单。

例如：

• 对于example.com/en/foo, 加载example.com/en/manifest.json
• 对于example.com/jp/foo, 加载example.com/jp/manifest.json

缺点

• 我不相信这实际上会起作用，因为每个网站只能有一个清单（据我所知），而且我相当确定它需要在根目录中
• 即使这是可能的，鉴于我的应用程序是一个静态托管的 SPA，我并不完全确定我将如何实施它，即我无法在浏览器加载清单之前动态更新清单的链接。也许我可以加载相对于 URI 的清单，但不能 100% 确定这会起作用

潜在解决方案 2

托管多个版本的 PWA（子域或 TLD）...例如：

• en.example.com/example.com
• jp.example.com/example.jp
• 等等...

鉴于清单是由构建过程生成的，这实际上很容易通过向管道添加多个部署步骤来实现。然后我将使用每个部署的环境变量来确定要插入到清单中的文本。

缺点

• 无法切换应用程序的语言（这对客户端来说是一个非常关键的功能）
• 不管它实施起来有多“容易”，它似乎都不对

问题和我的问题

我目前正在尝试优化我的网站上的页面,该页面返回大量的缩小的javascript.

通过优化,我的意思是加速:-)

我尝试加速此页面的方法之一是减少浏览器发送到服务器的标头.24小时前我不会想到这是可能的,但是,从那以后我发现了一个这样做的页面,想知道如何以及是否值得进一步调查.

我的页面位于https://libraries.sinemaculammviii.com/

我要比较的网页是https://www.google.com/jsapi

我使用http://tools.pingdom.com测试这两个页面的速度,其中一个清楚显示的是Google页面发送的请求标头不足

他们如何做到这一点？我应该这样做吗？

有没有人对我如何加快这个页面有任何其他建议？

我目前正在使用:

1. gzip来压缩页面
2. 用于缩小javascript的JSPacker
3. 我将应用缓存标头(我还没有这样做)
4. 虽然这可能不会产生影响因为页面不是静态的,但我已经通过CloudFlare CDN路由了我的网站

解决方案的证据

如果您比较以下链接中的标题(在展开的结果中显示),您可以清楚地看到Google页面没有发送请求标题:

我的页面

谷歌的页面

更新1

我想我可能已经想出了第一步,或者至少可能是第一步.Apache是​​否可能只删除标题？

更新2

问题...

我再次寻找一个很酷的CSS技巧来帮助我实现效果,同时防止使用不整洁的HTML ...

下图显示了我想要实现的目标,注意顶部和底部边框仅延伸约70%的宽度...

一个起点

作为一个起点,我使用我称之为"不整齐的HTML"的方法创建了上述内容,将这些分隔符添加到列表中.

这是我的jsFiddle:http://jsfiddle.net/E93UE/

你会看到我有<li class="divider><!-- Divider --></li>,如果可能的话,这就是我想要摆脱的东西

我的问题

因此,如果上面的解释不够好,我想将一个边框应用于块元素,但只显示整个元素的特定宽度的边框.

显然这不能仅仅使用border:XXX,它可能需要一些:before和:after选择器......

可能的解决方案...

我有两个关于如何实现这一点的想法,一个不太实用,另一个我不太确定如何实现(这些只是想法):

1. 设置列表元素的宽度并给它overflow:visible,所有元素都有position:absolute,然后只应用边距将元素带出列表框...(不是一个好的修复,更喜欢我的原始)
2. 另一个解决方案,我不太确定如何实施,可能是要走的路.通过应用两个:before元素,position:absolute你可以覆盖每个边框的边缘(我认为)

我的问题

我目前正在使用Cordova编写iOS应用程序.我有一个页面,上面有一个表格,如下所示:

当用户点击某个字段时,键盘会在iOS上按预期显示.但是,为防止我的应用移出屏幕,我启用了以下设置:

// Prevent the keyboard from pushing up the webview
cordova.plugins.Keyboard.disableScroll(true);

不幸的是,这可以防止一些导致我问题的事情:

1. 当一个场被聚焦时,屏幕不会滚动到该区域,因此有时候,该区域会出现在键盘后面.
2. 即使我确实有上面的解决方案,对于屏幕底部的元素,我将无法向下滚动足够远以使它们进入键盘上方的视图.

我的问题

解决方案1

在科尔多瓦,有没有办法自动滚动到聚焦场而不将整个应用程序移出屏幕？

如果可能,那么如何处理靠近底部的字段并且不能再向上滚动到视图中？

显然,第一点可以使用JavaScript/jQuery和一些聪明的逻辑来实现keyboard_height,position()和scrollTop().但是,这会产生关于键盘背后输入字段的第二点的问题......

解决方案2

如果我应用以下代码,它将修复上面突出显示的问题,但它将创建另一个问题(如下所述):

// Enable the auto scroll when the keyboard is shown
cordova.plugins.Keyboard.disableScroll(false);

无论如何要将我的标题("编辑配置文件"位)修复到屏幕顶部以确保该部分始终可见？

我试图在我的Mac上安装以下软件包,以便在我的本地环境中测试我的API,但到目前为止我还没有成功.

https://github.com/spachev/mysql_udf_bundle

我尝试了各种各样的东西,比如:

brew install libmysqlclient-dev

这产生了以下错误:

Error: No available formula with the name "libmysqlclient-dev" 
==> Searching for similarly named formulae...
Error: No similarly named formulae found.
==> Searching taps...
Error: No formulae found in taps.

我习惯于在CentOS上工作,所以我并不是特别熟悉apt和brew... ...有谁能告诉我如何最好地在我的Mac上安装它？

不确定它是否有任何相关性,但我正在运行Mac OSX 10.11.4(El Capitan).

我当时不使用安装MySQL brew install mysql,而不是,我也跟着指示操作:http://jason.pureconcepts.net/2015/10/install-apache-php-mysql-mac-os-x-el-capitan/

考虑以下 Vue 组件：

<template>

    <!-- Carousel -->
    <div class="carousel-container">

        <div ref="carousel" class="carousel">
            <slot></slot>
        </div>

    </div>

</template>

<script>

    export default {

        data() {
            return {
                items: this.$refs.carousel.querySelector('*')
            }
        },

        computed: {
            count: function () {
                return this.items.length;
            }
        },

        created () {
            console.log(this.count);
        }

    }

</script>

上面的方法不起作用，我认为这是因为我试图refs在数据对象中引用。

我正在尝试获取元素count内的 DOM 元素.carousel。我应该如何实现这一目标？

更新

经过进一步的研究，我发现可以实现如下目标：

<script>

    export default {

        data() {
            return {
                items: []
            }
        },

        computed: {
            count: function () {
                return this.items.length;
            }
        },

        mounted …