Question

我需要一些帮助来实现我的网站。我在JS中有一个div动画，它从右到左滑入屏幕（有一个按钮和右边的动作）。它在Firefox中运行良好，但在Chrome中运行不正常：在margin-right上具有相同的值，我在显示时完全看到了div，但在GG中没有，我只看到它的一部分。

隐藏div会出现同样的问题;价值不够高，所以仍然是一个可见的部分。我使用＆＃34; -webkit-margin-end＆＃34;为Chrome设置了更高的值在我的CSS中，这有助于隐藏，但是当显示问题仍然存在时。我想我必须在我的脚本中添加Chrome选项，因此＆＃34; margin-right＆＃34;动画时，值（或＃34; -webkit-margin-end＆＃34;值？）也可能会增加，但实际上我无法找到我的请求的任何答案。

这可能是因为我不能将它应用到我的代码中，这就是为什么有点帮助真的会受到赞赏。
此外，还有一种方法可以在页面加载时滑动吗？我喜欢div＆＃39; open＆＃39;当用户进入网站时

这是我的一段代码：

/* CSS */


/* div */
#texte {
background-color:#FFFFFF;
border-left:0.5px solid #000000;
color:#000000;
font-size:0.9vw;
font-weight:normal;
font-family:"Proza Libre", sans-serif;
top:0;
bottom:0;
right:0;
margin-right:-125px;
-webkit-margin-end:-350px;
width:19.4%;
padding:1vw 0.6vw 1vw 1vw;
float:right;
position:fixed;
display:block;
z-index:1000;
overflow-x:hidden;
overflow-y:auto;
}


/* button */
#plus {
bottom:2.5vw;
right:2.5vw;
position:fixed;
color:#000000;
text-align:center;
font-family:serif;
font-size: 2.5vw;
font-weight:normal;
line-height:2.5vw;
text-decoration:none;
cursor:pointer;
z-index:1000;
border: 0.8px solid #000;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width:2.5vw;
height:2.5vw;
}


/* SCRIPT */


jQuery.easing.def = 'easeOutBounce';

$('#plus').click(function() {
if($(this).css("margin-right") == "125px")  {
$('#texte').animate({"margin-right": '-=125'}, 'slow');
$('#plus').animate({"margin-right": '-=125'}, 'slow');
}
else {
$('#texte').animate({"margin-right": '+=125'}, 'slow');
$('#plus').animate({"margin-right": '+=125'}, 'slow');
}

});

Firefox：

Chrome：

Answer 1

试试这个，检测是否有铬并添加保证金。

$(document).ready(function(){
  var isChrome = !!window.chrome;

  if(isChrome) {
    $(".element").css("margin-right", "30px");
  }
});

Answer 2

您可以尝试找到一种方法，让您的代码以相同的方式为每个浏览器工作，而不是为每个特定于浏览器的错误找到临时解决方案。

我会避免操纵边距。相反，我建议让一个主DIV具有固定宽度，然后在内部使用您需要的填充DIV。然后使用right属性执行动画。

检查此代码段并查看此演示是否适合您。

function togglePanel() {
  if (parseInt($('#main').css('right')) == 0) {
    // get the current width (+ horizontal padding) (+ the border size * 2)
    width = $('#main').width() + parseInt($('#main').css('padding-left')) + parseInt($('#main').css('padding-right')) + 2;
    $('#main').animate({"right": -width}, 'slow');
  } else {
    $('#main').animate({"right": 0}, 'slow');
  }
}

$('#toggleMain').on('click', function() {
  togglePanel();
});

$(document).ready(function() {
  togglePanel();
});

* {box-sizing: border-box;}

#main {
  background:blue;
  position:absolute;
  padding:10px;
  right:-222px;
  top:0px;
  bottom:0px;
  width:200px;
  border:1px solid red;
  }

#inner {
  width:100%;
  padding:10px;
  border:1px solid green;
  background:orange;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main"><div id="inner">Here goes the text<br/>and more text</div></div>
<button id="toggleMain">Toggle</button>

Answer 3

浏览器检测不是一种好习惯，例如参见Is jQuery $.browser Deprecated?

更好的方法是提供一般的跨浏览器解决方案。

您可以使用normalize.css然后应用自己的CSS。这可能会使你需要的css“重置”，所以你自己的css在所有浏览器中都看起来很好/相等。

如何仅为JavaScript中的Chrome增加保证金权限值？

3 个答案: