那些遇到过的问题

小编And*_*cer的帖子

将Google"我的地图"图层添加到Google Maps Javascript API

我想在我们的网站上放置一张谷歌地图.

我知道可以使用Javascript将自定义标记添加到地图中,但我宁愿使用Google的MyMaps服务,因为我的同事可以在没有任何编程知识的情况下编辑地图.

您可以将自定义"我的地图"添加到嵌入式网站iframe.我正在使用Javascript API,因此我可以利用API提供的控件(例如通过自定义控件缩放或更改地图上的位置而不触及地图本身).

我可以在My API地图中插入使用"我的地图"创建和保存的地图作为图层吗？

javascript google-maps

And*_*obs
2015 09-30
21
推荐指数
2
解决办法
2万
查看次数

iOS Safari垂直滚动感觉粘滞(没有动量)

我在网页上的iOS Safari中遇到了垂直滚动的问题:在滚动时,页面以非常慢的方式移动,具有高阻力(这种行为对于iOS浏览器来说并不常见)

我试图找到问题:

<!-- piece of HTML listing -->
<body>
    <div id="wrapper">
          (here goes some content)
    </div>
</body>
Run Code Online (Sandbox Code Playgroud)

我在overflow-x:hidden;规则中检测到问题div#wrapper,将其更改为'overflow:hidden;' 或者在Web调试面板中动态删除它.

有没有机会在不改变页面布局的情况下修复它？

在Safari/iOS 6.1.4和7(包括iPad和iPhone)上重复,也在OS X上的iOS模拟器中重复.

safari scroll overflow ios

Art*_*dov
2015 04-10
19
推荐指数
1
解决办法
5264
查看次数

将地名和地址转换为Google地图网址和iFrame

背景

我在WordPress工作,想要显示嵌入式谷歌地图iframes.我在后端添加了一个自定义元变量来保存文本字符串.

目前

我使用Google地图创建地图链接,然后保存整个可嵌入的iframe代码.这为工作流程增加了另一个步骤.我必须手动转到Google地图,找到地址并保存iframe代码.

目标

我宁愿保存地址PHP并将其转换为iframe.Google Maps API中是否有一种方法iframe可以通过发送地址和可能的地名来获取？

google-maps

And*_*cer
2016 01-23
19
推荐指数
2
解决办法
5万
查看次数

背景附件:修复不起作用 - Android Chrome(v40)

背景

(之前有人问 过,很多次,我知道.但是,它似乎每次都是由不同的事情引起的.我已经完成了四个不同的StackOverflow答案线程并尝试了所有内容.似乎没有什么工作了,所以我相信这是一个新问题.)

无论如何,我有一个HMTL元素,背景图像需要修复,使用 background-attachment:fixed;

  • 所有桌面浏览器 - Works
  • 移动Firefox - 工作
  • 默认Android /三星浏览器 - 工作
  • 移动Chrome - 无效

我已经将问题转换为更简单的可复制测试,这是一个单独的section元素,设置为200%页面高度,背景是全屏和固定的.

码

html,body {
    padding:0;
    margin:0;
    height:100%;
    width:100%;
}
section {
    background-position:center center;
    background-attachment:fixed;
    background-size:cover;
    background-image:url(http://www.andymercer.net/wp-content/themes/andymercer/images/background/home.png);
    height:200%;
    width:100%;
}
Run Code Online (Sandbox Code Playgroud) 
<section>Test</section>
Run Code Online (Sandbox Code Playgroud)

JSFiddle For Testing

为了便于在智能手机上进行测试而不是代码片段:http://jsfiddle.net/LerLz1L2/

我试过的事情

  • backface-visibility: hidden;
  • -webkit-backface-visibility:inherit;
  • -webkit-transform: translate3d(0,0,0);
  • 设置元素和所有父母 position:static

css android google-chrome background-attachment

And*_*cer
2017 05-23
16
推荐指数
2
解决办法
1万
查看次数

Firefox 30不再隐藏选择框箭头

我一直使用"技巧":

select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}
Run Code Online (Sandbox Code Playgroud)

在FF上做自定义选择框但是自从版本30发布以来,这完全停止了.我试图找出这是否被弃用但找不到任何东西.是否有解决方法或其他方法来替换它？

html css firefox

Jay*_*pee
2014 05-29
13
推荐指数
2
解决办法
2万
查看次数

Sublime Text - 在新的"HTML(自定义)"语法中扩展HTML语法

背景

我正在使用一种名为Webclerk的语言,它使用自定义标签来查询4D数据库.它的工作原理与PHP类似.而不是.php处理成HTML 的文件,它使用".wc"文件,该文件被处理成HTML.

而不是像: <?php echo $variable; ?>,它看起来像_jit_ echo $variable; jj

<?php= _jit_,?>= jj.

在Sublime Text中,当选择PHP作为语法时,PHP会突出显示不同的块颜色,在HTML突出显示之上.我想对这些特殊标签做同样的事情.

我真的不在乎突出括号内的文字.只要有一个高亮/背景颜色开始并停止使用标签,我会非常满意.

我做了什么

我已经安装了Package Manager和Package Resource Viewer,然后提取了PHP和HTML包来检查它们.我也经历过教程.我遇到了两种不同类型的语法高亮(.tmLanguage vs .sublime-syntax)的问题.第一种方式有很多信息,第二种方式很少.我觉得刚开始和停止基于两个标签突出显示不是那么困难.

当我打开HTML包时,我得到:

Comments.tmPreferences
HTML.sublime-syntax
Miscellaneous.tmPreferences
Symbol List - ID.tmPreferences
encode_html_entities.py
html.sublime-snippet
html_completions.py
Run Code Online (Sandbox Code Playgroud)

教程中几乎没有提到这些.我尝试将HTML的名称更改为Webclerk,我确实设法在列表中获取新的语法.但是当我编辑标签时,突出显示的内容没有任何变化.

题

我想知道我是否可以获得一些关于从哪里开始的指示,这些文件的含义,以及可能是之前人们已经扩展HTML的任何示例.

sublimetext sublimetext3 4d-database

And*_*cer
2016 03-07
9
推荐指数
1
解决办法
624
查看次数

从Metabox调用WordPress库上传器/选择器

当我单击帖子/页面上的添加媒体按钮时,我可以选择添加媒体.选择媒体后,单击Insert Into Post,然后插入图像.但是,还有另一个选项,位于左侧边栏.我可以点击创建图库.图像选择过程是相同的,但是当我单击"创建新图库"时,它会转到一个新框架,允许我编辑图像的顺序.

这第二个窗口就是我追求的目标.我从metabox调用框架,我已经成功地让它抓住单个或多个图像并将ID保存为字符串,以及将缩略图直接插入预览框.我找不到任何关于调用Gallery框架的信息.

我目前的代码如下:

jQuery('#fg_select').on('click', function(event){

    event.preventDefault();

    // If the media frame already exists, reopen it.
    if ( file_frame ) {
        file_frame.open();
        return;
    }

    // Create the media frame.
    file_frame = wp.media.frame = wp.media({
        title: "Select Images For Gallery",
        button: {text: "Select",},
        library : { type : 'image'},
        multiple: true // Set to true to allow multiple files to be selected
    });

    file_frame.on('open', function() {
        var selection = file_frame.state().get('selection');
        ids = jQuery('#fg_metadata').val().split(',');
        ids.forEach(function(id) {
            attachment = wp.media.attachment(id);
            attachment.fetch();
            selection.add( …
Run Code Online (Sandbox Code Playgroud)

php media wordpress jquery gallery

And*_*cer
2014 02-27
8
推荐指数
1
解决办法
7274
查看次数

HTML5 Drag'n'Drop - 不适用于 iOS 12.1.2（Safari 和 Chrome）

背景

我有一个可通过拖放进行排序的列表。它可以在桌面浏览器和 Android 上的 Chrome 上完美运行。但是，它在 iOS 12.1.2 (iPhone 8) 上的 Safari 和 Chrome 上根本不起作用。

当前代码

请参阅下面的代码段，也可以方便地进行移动测试：https : //codepen.io/Kelderic/pen/KJMRgb

var dragging = null;

document.addEventListener('dragstart', function(event) {
  var target = getLI(event.target);
  dragging = target;
  event.dataTransfer.setData('text/plain', null);
  event.dataTransfer.setDragImage(self.dragging, 0, 0);
});

document.addEventListener('dragover', function(event) {
  event.preventDefault();
  var target = getLI(event.target);
  var bounding = target.getBoundingClientRect()
  var offset = bounding.y + (bounding.height / 2);
  if (event.clientY - offset > 0) {
    target.style['border-bottom'] = 'solid 4px blue';
    target.style['border-top'] = '';
  } else {
    target.style['border-top'] = …
Run Code Online (Sandbox Code Playgroud)

html javascript webkit drag-and-drop ios

And*_*cer
2020 06-20
7
推荐指数
3
解决办法
9147
查看次数

为什么 Chrome 不显示带有 &lt;use&gt; 和 Filter="url(#id)" 属性的 SVG？

背景

我有一组 SVG 图标，它们都有阴影。为了在 Chrome 中完成这项工作，我不能只使用filter:drop-shadow. 我必须使用filter:url(#drop-shadow), 并在我的<defs>部分定义阴影。

我在页面上也有这些图标的多个实例（它们是文件列表中的文件类型图标），所以我<use>用来保持我的页面干燥。

代码

外部 SVG 文件

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <defs>
        <filter id="drop-shadow">
            <feGaussianBlur xmlns="http://www.w3.org/2000/svg" in="SourceAlpha" stdDeviation="4"/>
            ..... more filter lines, shortened for brevity
        </filter>
    </defs>
    <symbol id="download-pdf">
        <path filter="url(#drop-shadow)" d="" fill="">...</path>
    </symbol>
    <symbol id="download-zip">
        ..... another icon
    </symbol>
    ... more icons
</svg>
Run Code Online (Sandbox Code Playgroud)

页面上的内联 SVG

<svg>
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="URL_OF_EXTERNAL_SVG"></use>
</svg>
Run Code Online (Sandbox Code Playgroud)

请参阅此处的最小工作示例：http : //h.andymercer.net/chrome-svg-bug/

问题

问题是 Chrome 没有找到#drop-shadow链接，所以破坏了图标。相反，Firefox 完美地显示了图标。

火狐：

在此处输入图片说明

铬合金：

在此处输入图片说明

如果您注意到，Chrome 屏幕截图确实显示了图标的某些部分。它显示不使用投影过滤器的部分。 …

css svg google-chrome

And*_*cer
2020 06-20
6
推荐指数
1
解决办法
964
查看次数

如何在 Android 任务切换器中触发 PWA 的自适应/可屏蔽图标

背景

我正在尝试将 Web 应用程序转换为真正的 PWA。我唯一无法工作的是 Android 任务切换器视图中的自适应图标。自适应图标在应用程序抽屉中完美运行：

在此处输入图片说明

但是，它在任务切换器中不起作用：

在此处输入图片说明

我的清单代码是：

{
    "name": "Kepler",
    "short_name": "Kepler",
    "theme_color": "rgb(30,130,230)",
    "background_color": "rgb(45,45,45)",
    "display": "standalone",
    "start_url": "/",
    "icons": [
        {
            "src": "https://hosted.functionaldevices.com/assets/kepler/favicons/android-chrome-72x72.png",
            "sizes": "72x72",
            "type": "image/png",
            "purpose": "maskable any"
        },
        {
            "src": "https://hosted.functionaldevices.com/assets/kepler/favicons/android-chrome-96x96.png",
            "sizes": "96x96",
            "type": "image/png",
            "purpose": "maskable any"
        },
        {
            "src": "https://hosted.functionaldevices.com/assets/kepler/favicons/android-chrome-128x128.png",
            "sizes": "128x128",
            "type": "image/png",
            "purpose": "maskable any"
        },
        {
            "src": "https://hosted.functionaldevices.com/assets/kepler/favicons/android-chrome-144x144.png",
            "sizes": "144x144",
            "type": "image/png",
            "purpose": "maskable any"
        },
        {
            "src": "https://hosted.functionaldevices.com/assets/kepler/favicons/android-chrome-152x152.png",
            "sizes": "152x152",
            "type": "image/png",
            "purpose": "maskable any"
        },
        { …
Run Code Online (Sandbox Code Playgroud)

android progressive-web-apps

And*_*cer
2020 06-20
6
推荐指数
0
解决办法
665
查看次数

标签 统计

css ×3

android ×2

google-chrome ×2

google-maps ×2

html ×2

ios ×2

javascript ×2

4d-database ×1

background-attachment ×1

drag-and-drop ×1

firefox ×1

gallery ×1

jquery ×1

media ×1

overflow ×1

php ×1

progressive-web-apps ×1

safari ×1

scroll ×1

sublimetext ×1

sublimetext3 ×1

svg ×1

webkit ×1

wordpress ×1