小编Ser*_*sov的帖子

当我加载此动画时,文本从HTML页面的左侧开始.

但是我需要它,如下所示

1. "你好"应该从html页面的左上角一侧开始
2. "你的"应该从页面的中间顶部(中间顶部)开始
3. "世界"应该从页面右上方的小角落开始

(我已经编辑了上面的内容以便更清晰和理解)

总之,应该到中心放大.所有这些都必须返回缩小到页面的左侧.

的jsfiddle

$('#hello').animate({
      zoom: '150%',
      left: window.innerWidth / 1
}, 3000, function() {
    // 4. Pause for 3 seconds
    $(this).delay(3000)
    // 6. zooms out to 200% heading towards left top corner,
    // (logo position) 
    // 7. Fades out when reaching the logo 8. Logo appears
    .animate({
        zoom: '40%',
        left:0
    }, 3000, function() {
        $(this).find('span').fadeOut()
    })
});

h1 {
    font-size: 1em;
    zoom: 200%;
    transition: zoom 1s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="hello">
<h1>&nbsp;H<span>ello</span>&nbsp;Y<span>our</span>&nbsp;W<span>orld</span></h1>

Materialize框架带有奇怪的布局(至少对我而言).我在列之间找不到任何余量.这是我的代码:

<div class="container">
<div class="row">
  <div class="col s4">
      kerlos      
  </div>
  <div class="col s4">
      kerlos      
  </div>
  <div class="col s4">
      kerlos     
  </div>
</div> 
</div>

这就是浏览器的外观.

列之间没有边距!

Opera Mini不支持line-height并且没有font-size正确,我有2个文本块(10px/1 Arial) - 一个位于页面顶部,一个位于页面底部,两者都应始终可见(不允许滚动或移动它们),但因为它们需要更多Opera Mini中的空间我必须缩小尺寸并删除其他一些块,这样就不会有任何滚动(这对于小屏幕的移动设备来说至关重要320x480px).

我知道JS解决方案完美运行,但我不允许在该页面上使用任何脚本.我也不能使用任何非标准字体.我只允许使用内部样式表.

我找不到任何更好的东西,:-o-prefocus并且我和它一起使用它@media所以它只影响具有小屏幕的移动设备,其中文本占用很多空间,但是这样它仍然影响那些设备上的所有Operas,所以其他块是不必要的小或被移除.

所以基本上,问题是 - 是否有任何针对Opera Mini的纯CSS解决方案？

更新:

最终,我最终解决的原始问题的最佳非js解决方案是:

:-o-prefocus, .block1, .block2 {font-size: 14px;}
@-o-viewport {zoom: 0.75;}

我针对IE,Chrome和Firefox测试了以下代码,并想知道导致结果差异的原因.

var body = document.getElementsByTagName('body')[0];
body.innerHTML = '<div id="myId"><span>I am a text</span></div>';
var divElement = document.getElementById('myId');

console.log(divElement.children.length); 
// All browsers say "1" !

body.innerHTML = ''; // just resetting the DOM

console.log(divElement.children.length); 
// Chrome and FF say "1", IE says "Sorry guys, it's 0"

毫不奇怪,在三个浏览器中,在第二次innerHTML更改之后,divElement对象不再引用渲染 <div>.我没有遇到麻烦.

我发现更有趣的是IE似乎丢弃了divElement孩子.Chrome和FF仍然允许我使用旧标记及其子标记,就像它们被渲染一样,但是IE将标记转换为空标记.

浏览器处理innerHTML导致此行为的更改的方式有何不同？

每当我似乎应用一些代码时,例如使用最新的iOS Safari浏览器移动div,它实际上并不在两个规则集之间转换.我已经尝试过更改为使用除百分比值之外但仍然到今天,当我使用transition: transform;任何translate应用的属性时,我从来没有能够使它工作.

我正在使用正确的前缀和检查支持,应该没有问题.

http://caniuse.com/#search=transition

http://caniuse.com/#search=translate

的jsfiddle

$('button').on('click', function() {
    $('.mydiv').toggleClass('added-class');
});

.mydiv {
    display: inline-block;
    width: 100px;
    height: 50px;
    background-color: red;

    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -moz-transition: transform 0.6s ease-out;
    -o-transition: transform 0.6s ease-out; 
    -webkit-transition: transform 0.6s ease-out;
    transition: transform 0.6s ease-out;
}

.added-class {
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="mydiv"></div>
<button type="button">Toggle class</button>

我尝试查看show modal窗口.该窗口包含多个范围.但是宽度和高度都有限制.当span内容小于span宽度时:一切正常,我可以看到这个图标.

但是当文字很大时,我看不到这个图标.我没有任何想法,如何在不使用Javascript(jQuery)的情况下在纯CSS上执行此操作.

HTML:

<div class="wrapper">
    <span class="first">First</span>
    <br/>
    <span class="second">Second contain a lot of text. Really long span is here</span>
</div>

CSS:

.wrapper{
    width: 300px;
    height: 500px;
    background: green;
    overflow: hidden;
}

span{
    display: inline-block;
    width: 236px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    padding: 0px;
    margin: 10px 20px;
    padding: 0 16px 0 8px;
    white-space: nowrap;
    overflow: hidden;
    background: #fc0;
    text-overflow: ellipsis;
    border: 1px solid green;
    border-radius: 4px;
}

span:hover{
  border: 1px solid blue;
  cursor: pointer;
}

span:hover::after{
    font: normal …

在此Codepen中, 每个圈子都需要转换为新的配置800px.我正在寻找的配置是在页面中居住circle1并且circle2仍然居中,并且circle3在圆圈1和2下方.为了清晰起见,下面的图像显示了我希望圆圈结束的方式.

HTML:

<div class="circles">
  <div class="circle1">
    <a id="projects" href="#">Projects</a>
  </div>

  <div class="circle2">
    <a id="about" href="#">About</a>
  </div>

  <div class="circle3">
      <a id="contact" href="#">Contact</a>
  </div>
</div>

正如你在屏幕截图中看到的那样,我能够转换circle1并circle2稍微向左移动circle3,同时也在下方移动circle1并circle2告诉circle3移动left: -150px.

但是circle3也没有想留在他的位置,当他移动.因此,如果我将他滑下来,我们显然会向左下方滑动.无论我移动到哪里circle3,当我将视口移动到更小的尺寸时,他都会继续移动.

这是我的媒体查询,告诉圈子在以下时移动800px:

@media (max-width: 800px) {
  .circles {
    width: 80%;
  }

  .circle1, circle2 {
    left: 20%;
  }

  .circle3 {
    left: -150px;
  }
} …

我创建了一个li项目,Html.ActionLink最终将其渲染为锚标记.我已经将CSS应用于悬停,它的工作原理非常好.

现在我需要li在点击它时突出显示该框.我使用过jQuery,但似乎没有用.我检查了调试器工具,似乎没有任何错误.所以我猜这个类没有得到应用.我不确定是什么问题.请参阅下面的代码.

$(document).ready(function() {
  $('#navcontainer ul li a').click(function() {
    $('.highlightMenu').removeClass('highlightMenu');
    $(this).addClass('highlightMenu');
  });
});

#navcontainer ul {
  display: block;
  list-style-type: disc;
  padding-top: 40px;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 40px;
}

#navcontainer ul li {
  display: inline-block;
  /*height: 50px;
        width:150px;*/
  border: 5px solid #009ddc;
  border-left: 5px solid #009ddc;
  border-right: 5px solid #009ddc;
  border-bottom: 5px solid #009ddc;
  border-top: 5px solid #009ddc;
  z-index: 0 !important;
  padding: 0;
  background: #fff;
  color: #24387f !important;
}

#navcontainer …

我根本无法弄清楚问题是什么.

我有一个非常简单的网站制作,在桌面(Chrome)上完美运行,但只是在我的手机(iPhone 6)上显示一个空白页面.

我试过在本地和网上模拟它没有任何问题.我从所有不同的网站上运行了较少的测试,他们似乎没有发现任何问题.

该网站是:https://admin.marcrasmussen.dk

我知道这是相当不寻常的,但我试图在过去的5个小时内解决这个问题.谁能看到我做错了什么？

我-webkit-transition在Safari中遇到了问题.这些转换在Chrome,FF和IE10中运行良好(使用非前缀转换属性).

在我的网站中,有3个面板可供查看.主窗口默认打开,另外2个窗口右侧折叠显示其内容的条子.单击折叠面板时,会通过JS向其添加其他类,并将其转换为100%宽度.

CSS:

.panel-1{
  width: 100%;
}

.panel-2{
    width: 8rem;
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden;
    z-index: 500;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

.panel-2:hover{
     width: 10rem;
}

.panel-2.panel-open{
     width: 100%;
}

.panel-3{
    width: 4rem;
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden;
    z-index: 501;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

.panel-3:hover{
     width: 6rem;
}

.panel-3.panel-open{
     width: 100%;
}

问题似乎与测量单位的差异有关.悬停过渡按预期(rem到rem)工作,但"面板打开"上的宽度过渡(rem到%)跳过过渡并快速打开.如果我将默认宽度切换为百分比而不是rem,则转换再次起作用.我不能这样做,因为它是一个流体站点,面板折叠宽度需要是静态的而不是相对的.

我试图添加min-width的% …