我有一個(gè)網(wǎng)站開發(fā)者的代碼，在Firefox中響應(yīng)仍然有效，但在Chrome中更新瀏覽器版本后不再有效。我想是從112版開始，但我不確定。與我的問(wèn)題相關(guān)的在這個(gè)版本中使用代碼有什么變化嗎？
網(wǎng)站:https://matahome.nl
代碼:
file:responsive _ all . less
@responsivespacing-x: @ds;
@responsivespacing-y: @ds;
@breakpoint-item: 200px;
@breakpoint-fullwidth: 640px;
@breakpoint-to-1: @breakpoint-item*2;
@breakpoint-to-2: @breakpoint-item*3;
@breakpoint-to-3: @breakpoint-item*4;
@breakpoint-to-4: @breakpoint-item*5;
@breakpoint-to-5: @breakpoint-item*6;
@breakpoint-to-6: @breakpoint-item*7;
@breakpoint-to-7: @breakpoint-item*7;
@breakpoint-to-8: @breakpoint-item*8;
@breakpoint-to-9: @breakpoint-item*9;
@breakpoint-to-10: @breakpoint-item*10;
@breakpoint-to-11: @breakpoint-item*11;
@breakpoint-to-12: @breakpoint-item*12;
@breakpoint-to-13: @breakpoint-item*13;
@breakpoint-to-14: @breakpoint-item*14;
//The basics, also applies to no-js users.
.respfluid
{
.ri
{
margin-bottom: @responsivespacing-y;
float: left;
+ .ri
{
margin-left: @responsivespacing-x;
}
a.image
{
text-align: center;
}
}
//rc = Responsive Container, ri = Responsive Item
}
//Making it break using element queries generated by javascript [min-width~=xxxxx]
// using breakpoint vars in them @{breakpoint-to-xx}
//The actual breakpoints.
//@todo: correct the breakpoint widths, they are not all ok!
.responsive
{
//When looking for trouble in nested rc ri stacks, remove the below / rework the hell out of it.
.ri .ri
{
.pr1; //ugly
clear: none; //ugly
}
.s-ultimate
{
.ri .ri
{
.pr1;
float: left; //ugly
}
.ri:container(width > @{breakpoint-to-13})
{
.pr14;
}
.ri:container(width > @{breakpoint-to-12} <= @{breakpoint-to-13})
{
.pr13;
}
.ri:container(width > @{breakpoint-to-11} <= @{breakpoint-to-12})
{
.pr12;
}
.ri:container(width > @{breakpoint-to-10} <= @{breakpoint-to-11})
{
.pr11;
}
.ri:container(width > @{breakpoint-to-9} <= @{breakpoint-to-10})
{
.pr10;
}
.ri:container(width > @{breakpoint-to-8} <= @{breakpoint-to-9})
{
.pr9;
}
.ri:container(width > @{breakpoint-to-7} <= @{breakpoint-to-8})
{
.pr8;
}
.ri:container(width > @{breakpoint-to-6} <= @{breakpoint-to-7})
{
.pr7;
}
.ri:container(width > @{breakpoint-to-5} <= @{breakpoint-to-6})
{
.pr6;
}
.ri:container(width > @{breakpoint-to-4} <= @{breakpoint-to-5})
{
.pr5;
}
.ri:container(width > @{breakpoint-to-3} <= @{breakpoint-to-4})
{
.pr4;
}
.ri:container(width > @{breakpoint-to-2} <= @{breakpoint-to-3})
{
.pr3;
}
.ri:container(width > @{breakpoint-to-1} <= @{breakpoint-to-2})
{
.pr2;
}
.ri:container(width <= @{breakpoint-to-1})
{
.pr1;
}
}
.s7654321
{
.ri .ri
{
.pr1;
float: left; //ugly
}
.ri:container(width > @{breakpoint-to-6})
{
.pr7;
}
.ri:container(width > @{breakpoint-to-5} <= @{breakpoint-to-6})
{
.pr6;
}
.ri:container(width > @{breakpoint-to-4} <= @{breakpoint-to-5})
{
.pr5;
}
.ri:container(width > @{breakpoint-to-3} <= @{breakpoint-to-4})
{
.pr4;
}
.ri:container(width > @{breakpoint-to-2} <= @{breakpoint-to-3})
{
.pr3;
}
.ri:container(width > @{breakpoint-to-1} <= @{breakpoint-to-2})
{
.pr2;
}
.ri:container(width <= @{breakpoint-to-1})
{
.pr1;
}
}
.s6421
{
.ri .ri
{
float: left; //ugly
}
.ri:container(width > @{breakpoint-to-6})
{
.pr6;
}
.ri:container(width > @{breakpoint-to-3} <= @{breakpoint-to-6})
{
.pr4;
}
.ri:container(width > @{breakpoint-to-1} <= @{breakpoint-to-3})
{
.pr2;
}
.ri:container(width <= @{breakpoint-to-1})
{
.pr1;
}
}
.s63
{
.ri .ri
{
float: left; //ugly
}
.ri:container(width > @{breakpoint-to-3})
{
.pr6;
}
.ri:container(width <= @{breakpoint-to-3})
{
.pr3;
}
}
.s42
{
.ri .ri
{
float: left; //ugly
}
.ri:container(width > @{breakpoint-to-2})
{
.pr4;
}
.ri:container(width <= @{breakpoint-to-2})
{
.pr2;
}
}
.s31
{
.ri .ri
{
float: left; //ugly
}
.ri:container(width > @{breakpoint-to-2})
{
.pr3;
}
.ri:container(width <= @{breakpoint-to-2})
{
.pr1;
+ &
{
.pr1;
}
}
}
.s21
{
.ri .ri
{
float: left; //ugly
}
.ri:container(width > @{breakpoint-to-1})
{
.pr2;
}
.ri:container(width <= @{breakpoint-to-1})
{
.pr1;
}
}
}
.clear-ri// Pasted css attributes using class selectors; to be able to use 'seven-a-row(@margin: @responsivespacing-x)' classes on other places as well.
{
clear: both;
margin-left: 0;
}
//Extra, not for generic use
//Extra, not for generic use
.pr14(@margin: @responsivespacing-x)
{
width: ~"calc(7.1428571% - " @margin / 14 * 13 ~")";
&:nth-of-type(14n+1)
{
.clear-ri;
}
}
.pr13(@margin: @responsivespacing-x)
{
width: ~"calc(7.6923077% - " @margin / 13 * 12 ~")";
&:nth-of-type(13n+1)
{
.clear-ri;
}
}
//Extra, not for generic use
.pr12(@margin: @responsivespacing-x)
{
width: ~"calc(8.3333333333333% - " @margin / 12 * 11 ~")";
&:nth-of-type(12n+1)
{
.clear-ri;
}
}
//Extra, not for generic use
.pr11(@margin: @responsivespacing-x)
{
width: ~"calc(9.09090909090% - " @margin / 11 * 10 ~")";
&:nth-of-type(11n+1)
{
.clear-ri;
}
}
//Extra, not for generic use
.pr10(@margin: @responsivespacing-x)
{
width: ~"calc(10% - " @margin / 10 * 9 ~")";
&:nth-of-type(10n+1)
{
.clear-ri;
}
}
.pr9(@margin: @responsivespacing-x)
{
width: ~"calc(11.11111111% - " @margin / 9 * 8 ~")";
&:nth-of-type(9n+1)
{
.clear-ri;
}
}
.pr8(@margin: @responsivespacing-x)
{
width: ~"calc(12.5% - " @margin / 8 * 7 ~")";
&:nth-of-type(8n+1)
{
.clear-ri;
}
}
.pr7(@margin: @responsivespacing-x)
{
width: ~"calc(14.28% - " @margin / 7 * 6 ~")";
&:nth-of-type(7n+1)
{
.clear-ri;
}
}
//whatever a row.... do it yourself from 7 on.
.seven-a-row(@margin: @responsivespacing-x)
{
.rc .ri,
&.rc .ri
{
.pr7(@margin);
}
}
.pr6(@margin: @responsivespacing-x)
{
width: ~"calc(16.6666667% - " @margin / 6 * 5 ~")";
&:nth-of-type(6n+1)
{
.clear-ri;
}
}
.six-a-row(@margin: @responsivespacing-x)
{
.rc .ri,
&.rc .ri
{
.pr6(@margin);
}
}
.pr5(@margin: @responsivespacing-x)
{
width: ~"calc(20% - " @margin / 5 * 4 ~")";
&:nth-of-type(5n+1)
{
.clear-ri;
}
}
.five-a-row(@margin: @responsivespacing-x)
{
.rc .ri,
&.rc .ri
{
.pr5(@margin);
}
}
.pr4(@margin: @responsivespacing-x)
{
width: ~"calc(25% - " @margin / 4 * 3 ~")";
&:nth-of-type(4n+1)
{
.clear-ri;
}
}
.four-a-row(@margin: @responsivespacing-x)
{
.rc .ri,
&.rc .ri
{
.pr4(@margin);
}
}
.pr3(@margin: @responsivespacing-x)
{
width: ~"calc(33.333333% - " @margin / 3 * 4 ~")";
&:nth-of-type(3n+1)
{
.clear-ri;
}
}
.three-a-row(@margin: @responsivespacing-x)
{
.rc .ri,
&.rc .ri
{
.pr3(@margin);
}
}
.pr2(@margin: @responsivespacing-x)
{
width: ~"calc(50% - " @margin * 3 ~")";
&:nth-of-type(2n+1)
{
.clear-ri;
}
}
.two-a-row(@margin: @responsivespacing-x)
{
.rc .ri,
&.rc .ri
{
.pr2(@margin);
}
}
.pr1(@margin: @responsivespacing-x) /*ignored*/
{
.clear-ri;
width: auto;
float: none;
}
.one-a-row(@margin: @responsivespacing-x)
{
.rc .ri,
&.rc .ri,
.rc .ri + .ri,
&.rc .ri + .ri
{
.pr1(@margin);
}
}
In firefox it works fine:
[chrome versus firefox display](https://i.stack.imgur.com/TdTdR.jpg)
Also in firefox i can inspect the code (this is no longer available in chrome:
[inspector firefox display](https://i.stack.imgur.com/kFMZI.jpg)
Also there is also a cms.yml file:
search_limit: 100
inline-editable: 1
title_delimiter: '||'
backgroundslides: 1
backgroundslides_automaxwidth: 0
bannerslide: fade
delete_old_blocks_automatically: 0
delete_old_templates_automatically: 0
# or scroll
page_icons: 1
position_classes:
respfluid s-ultimate: POSITION_CLASS_SULTIMATE
respfluid s7654321: POSITION_CLASS_S7654321
respfluid s6421: cms.POSITION_CLASS_S6421
respfluid s63: cms.POSITION_CLASS_S63
respfluid s42: cms.POSITION_CLASS_S42
respfluid s31: cms.POSITION_CLASS_S31
respfluid s21: cms.POSITION_CLASS_S21
respfluid seven-a-row: cms.POSITION_CLASS_7R
respfluid six-a-row: cms.POSITION_CLASS_6R
respfluid four-a-row: cms.POSITION_CLASS_4R
respfluid three-a-row: cms.POSITION_CLASS_3R
respfluid two-a-row: cms.POSITION_CLASS_2R
respfluid sbs: cms.POSITION_CLASS_FLUID
#analytics: UA-XXXX
responsive_auto_image: 1
redirectmembersonlyhidden: 1
secure_videos: 1
socialicon:
width: ''
params: 'y=32'
add_dims: 0
langswitcher:
image: x=33|y=23|crop
background:
image: x=1680|y=1050
banner:
image: x=1180|y=1180
fill: 0
item:
image: x=300|y=200
image_large: x=1024|y=768
listitem:
image: x=150|y=150
imgwdth: 150
photogallery:
image: x=154|y=115
categorylist:
image: x=154|y=154
imgwdth: 154
categorylist_wrapper:
image: x=154|y=154
limit: 9
iconimage:
small: x=32|y=32
photo: x=48|y=32|crop
pageiconimage: x=30|y=30|crop
personel:
photo_overview: y=180|x=180|crop
person_photo: x=90|y=90|crop