欢迎光临
我们一直在努力

解决ios所有浏览器切换背景时不能及时生效的问题

ziyoukeji阅读(22)

最近再做小说网站,小说阅读页有一个切换背景的功能,我们的背景都是图片,苹果手机切换背景时发现背景色没有变化,或偶尔变化,或多点几次后发生变化。最想了很多解决方案最终找到了解决方案

这是一篇没有代码的解决方案,只能说思路。

原来切换背景时我都是用js切换body的class   值  用不同的class切换 background-image的值

以上方式在苹果就会有问题

解决方案:

我的项目中有5个背景

我把5个背景都单独拿出来 不用body呈现了 , 用5个div去呈现  这里还是用background-image

页面加载时先把div加载出来不过css 样式  opacity: 0;   这个属性让元素透明了 (结果是元素已经完全加载完  只不过是透明的你看不见   不能用display: none😉

当切换背景时只需要把opacity  变成1 如  opacity :1

好了问题解决了

微信小程序css控制iphone底部距离横杠的间距

ziyoukeji阅读(23)

本篇文章记录一下,  做微信小程序时因苹果x以后的手机底部有一个横杠  我们做底部悬浮时会和横杠重叠 的解决方案

原来还需要用js去判断机型来控制样式,现在不用了.直接用wxss控制就好了,直接上代码

padding-bottom: calc(env(safe-area-inset-bottom)/2);

加上面上的样式就会在有横杠的手机上元素会向上移动一段距离

解决IE11以下Array没有find的方法

ziyoukeji阅读(47)

本篇文章记录一下ie11以下array数组不支持find方法的解决方案

扩展find方法
if(!Array.prototype.find){
    Array.prototype.find = function(callback) {
        return callback && (this.filter(callback)|| [])[0];
    };
}

调用demo

//demo
var s = [{"name":"001"},{"name":"002"},{"name":"003"}];
s.find(function(a){
  return a.name=='001'
});

 

display:inline-block的间隙问题和解决办法

ziyoukeji阅读(67)

本篇文章记录一下标签设置display:inline-block后并排存在间隙问题和解决办法

解决方案  给父元素设置 font-size:0  就可以了

/*样式*/
.htb_tags{font-size:0}
.htb_tags a{display: inline-block;}

/*html代码*/
<div class="htb_tags">
                <a href="" title="">摊牌</a>
                <a href="" title="">大唐</a>
                <a href="" title="">西游</a>
                <a href="" title="">摊牌</a>
                <a href="" title="">大唐</a>
                <a href="" title="">西游</a>
                <a href="" title="">摊牌</a>
            </div>

解决页面刷新时部分元素闪烁抖动后归位的问题

ziyoukeji阅读(79)

本篇文章讲解一下页面在刷新时部分元素先闪烁抖动后归位的问题

我遇到的问题是刷新时顶部的logo和用户头像先闪烁一下,然后才回到自己的位置上 视觉上特别难受

经过实验,发现是img标签导致的   我的解决方案是把img样式中display改成block

解决.net Core3.0 中JsonResult返回的json首字母变小写的问题

ziyoukeji阅读(83)

本篇文章讲解一下如何解决.net Core3.0 中JsonResult返回的json首字母变小写的问题

第一步:我们要引用两个库 ( 再需要引用的项目上右键选择(管理NuGet程序包) 查找下面两个包并安装)

Microsoft.AspNetCore.Mvc.NewtonsoftJson
Newtonsoft.Json

第二步:修改Startup.cs文件  如下代码

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddControllersWithViews().AddNewtonsoftJson(options =>
            {
                //不使用驼峰样式的key
                options.SerializerSettings.ContractResolver = new DefaultContractResolver();
            }); 
        }

第三步重新编译。

好,问题解决

 

js禁用滚动条记忆功能

ziyoukeji阅读(79)

本篇文章记录一下js禁用滚动条记忆功能,也可以解决页面刷新时回到顶部

js代码如下:

history.scrollRestoration = 'manual';

 

此代码是禁用滚动条记忆功能,也相当于页面刷新时回到顶部。

解决部分浏览器不支持space-evenly兼容性问题

ziyoukeji阅读(118)

本篇文章讲解一下部分浏览器在flex布局中justify-content不支持space-evenly的兼容性问题

解决方案我们用space-between 代替

//原始样式,只写关键其他样式不写了
.flexbox{
     justify-content: space-evenly;
}

改成如下样式
.flexbox{
     justify-content: space-between;
}
.flexbox::after, .flexbox::before { 
     content: ""; 
     display: block; 
}

解决百度浏览器fixed定位不显示的问题

ziyoukeji阅读(102)

本篇文章讲解一下H5页面在百度浏览器中fixed定位  不显示的问题

不显示的原因主要是百度浏览的广告屏蔽机制导致到。以下我整理出来的一些思路,能不能解决还需要看个人的页面代码情况

思路一:fixed渲染的窗体不要添加width:100%  如果做遮罩可以有考虑left、top  right  bottom全设置成0

思路二: 不用给有position的设置高度  在里面套一个div  用里面的高度撑起来

思路三:  上面都处理了还不行  .可以考虑body上加height:100%

Secure Nginx with Certbot Let’s Encrypt on CentOS 7

lizhihong阅读(124)

1. 登录Centos服务器

    Nginx中已经配置好三个域名
    ***.cn
    www.***.cn
    a.***.cn

2. Install snapd

    $ sudo yum install epel-release
    $ sudo yum install snapd
    $ sudo systemctl enable --now snapd.socket
    $ sudo ln -s /var/lib/snapd/snap /snap

3. Ensure that your version of snapd is up to date

    $ sudo snap install core
    $ sudo snap refresh core

4. Remove certbot-auto and any Certbot OS packages

    $ sudo yum remove certbot

5. Install Certbot

    $ sudo snap install --classic certbot

6. Prepare the Certbot command

    $ sudo ln -s /snap/bin/certbot /usr/bin/certbot

7. Choose how you’d like to run Certbot

    $ sudo certbot --nginx -d ***.cn,www.***.cn,a.***.cn
    ##增加域名
    $ sudo certbot --expand -d ***.cn,www.***.cn,a.***.cn,b.***.cn

8. Test automatic renewal

    $ sudo certbot renew --dry-run

 

自由技术,自由自在

项目合作联系我们