如何使 safari 浏览器与 salesforce 兼容。？

Question

我有一个问题，比如我的应用程序运行良好并且在 chrome 中运行良好，但在 safari 浏览器中，我的保存和取消按钮未处于原始位置或未正确对齐。 我的应用程序是在 salesforce 中开发的，所以我需要帮助。 我附上了这个页面的截图，所以我们将帮助更好地理解问题。

在 Chrome 中

在野生动物园

以下 html 代码用于保存和取消

 <div style="display: inline-block; float: left; margin-left:10px; width: 190px; margin-right: 0px; transition-property: margin-top; transition-duration: 500ms; position: fixed;"> <a class="save" onclick="jobsave();" > <span >Save</span></a> <br/><br/> <a class="cancel-btn" href="javascript:void(0);" onclick="window.open('/apex/FieldAwareConnectorPage','_self');">Cancel</a> </div>

以下 css 用于保存和取消按钮

 .cancel-btn { display:block; width:200px; text-align:center; text-decoration:none; font-size: 14px; font-family: tahoma; color: #6D6D6D; text-shadow: 0px 1px 1px #EEE; padding:10px 0; background-color: #1a82f7; background: -webkit-gradient(linear, 0% 50%, 0% 50%, from(#E3DDDD), to(#fff)); background: -webkit-linear-gradient(top, #E3DDDD, #fff); background: -moz-linear-gradient(top, #E3DDDD, #fff); background: -ms-linear-gradient(top, #E3DDDD, #fff); background: -o-linear-gradient(top, #E3DDDD, #fff); box-shadow:0 0 10px #E3DDDD inset; box-shadow: 0px -3px 10px #E3DDDD inset; } .cancel-btn:hover { background:none; box-shadow:0 0 0; text-decoration:none; color: #6D6D6D; }

Answer 1

这种语义使用 HTML5 标签，并使用将缩放元素的网格进行响应。

这是JSFiddle演示

截屏：

//HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="index.css">
</head>
<body>  
    <section id="main">
        <header>
            <h1>New Job</h1>
            <h2>Job Summary</h2>
            <hr>
        </header>
        <section id="widgets">
            <section id="area1">
                <form>
                    <input type="text" name="customer_location" placeholder="Customer & Location">
                    <input type="text" name="contact" placeholder="Contact">
                    <input type="text" name="asset" placeholder="Asset">
                </form>
            </section>
            <section id="area2">
                <form>
                    <textarea placeholder="Job Description"></textarea>
                    <p id="count">4096 remaining characters</p>
                </form>
            </section>
        </section>
    </section>
    <aside>
        <button onclick="">Save</button>
        <button onclick="">Cancel</button>
    </aside>
</body>
</html>

//CSS

h1,h2,h3,h4,h5,h6,p{
    -webkit-font-smoothing: antialiased;
    font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial;
}
body{
    margin: 0;
    height: 100vh;
    width: 100vw;

    display: -webkit-flex;
    display: flex;

}   
#main{
    display: -webkit-flex;
    display: flex;

    -webkit-flex: 80;
    flex: 80;

    padding: 3em;

    -webkit-flex-direction: column;
    flex-direction: column;
}
h1{
    color: #fff;
    padding-left: 1em;
    font-size: 3em;
    background: #31D2D2;
}
h2{
    color: #7C7C7C;
}
#widgets{
    display: -webkit-flex;
    display: flex;

    -webkit-flex: 1;
    flex: 1;


}

#area1{
    display: -webkit-flex;
    display: flex;

    -webkit-flex: 20;
    flex: 20;

    padding: 1em;

    -webkit-flex-direction: column;
    flex-direction: column;
}
#area2{
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: column;
    flex-direction: column;

    padding: 1em;

    -webkit-flex: 80;
    flex: 80;   

}
form{
    cursor: default !important;

    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: column;
    flex-direction: column;

    background: #ECF0F1;

    -webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
    box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
    -webkit-border-radius: 0.3em;
    border-radius: 0.3em;
    padding: 1.3em;
}
form>input{ 
    height: 2.5em;
    margin: 0.2em 0;
    font-size: 1em;
    -webkit-font-smoothing: antialiased;
    font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial;
    text-align: center;
    border: 1px solid #d5dadc;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    color: #7C7C7C;
    outline: none;
}
button{
    height: 2.5em;
    margin: .5em 1em;
    padding: 0;
    font-size: 1em;
    -webkit-font-smoothing: antialiased;
    font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial;
    cursor: pointer;
    outline: none;
    border: none;
    color: #fff;
    border-radius: 2px;
    -webkit-border-radius: 2px;
}
aside>button:nth-of-type(1){
    background: #2ECC71;
}

aside>button:nth-of-type(2){
    background: #7C7C7C;
}

aside>button:nth-of-type(1):hover{
    background: #40D47E;
}
aside>button:nth-of-type(2):hover{
    background: #9A9999;
}
button:active{
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
textarea{
    height: 10em;
    max-width: 100%;
    border: 1px solid #d5dadc;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    color: #7C7C7C;
    outline: none;
        font-size: 1em;
    -webkit-font-smoothing: antialiased;
    font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial;

}
#count{
    font-style: italic;
    color: #ccc;
}
aside{
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: column;
    flex-direction: column;

    -webkit-justify-content: flex-end;
    justify-content: flex-end;


    -webkit-flex: 20;
    flex: 20;

    z-index: 999;
    -webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
    box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
    background: #ECF0F1;    


}

如何使 safari 浏览器与 salesforce 兼容。？

问题描述

1 个解决方案

解决方案1
0 2015-09-20 20:13:33

如何使 safari 浏览器与 salesforce 兼容。？

问题描述

1 个解决方案

解决方案1 0 2015-09-20 20:13:33

解决方案1
0 2015-09-20 20:13:33